Chapter3 - JSX 사용법 (21.11.15)

개발자 도구를 열고 에러를 보는 것은 절대 까먹으면 안된다!

(F12나 [Cmd +Opt + i ](맥), [Ctrl + Shift + i](윈도우) 또는 마우스 우클릭+검사를 눌러 개발자 도구를 열 수 있다)

 

 

JSX 규칙

1. 태그는 꼭 닫아주기

<input type="text"/> 원래 이렇게 닫아줘야 하는데 

<input type="text"> 이런식으로 태그를 닫아주지 않으면 아래와 같은 빨간 화면을 만나볼수 있다.

앞으로는 빨간화면이 나와도 당황하지 않고 뭐가 문제인지 확인해보기!

 

2. 무조건 1개의 엘리먼트를 반환하기

이처럼 2개의 엘리먼트를 반환하면 아래와 같이 오류가 생긴다.

올바른 예시

하나의 태그 안에 작성해 준다면 문제없다!

Tip. 반환하는 값이 아예 없어서도 안된다. 그래서 null이라도 반환 해주어야 한다.

 

3. JSX에서 javascript 값을 가져오려면?

변수 불러오기 - {변수명}

변수를 선언하고 {}-중괄호 안에 변수명을 써서 javascript 값을 가져올 수 있다.

만약 중괄호를 쓰지 않고 변수명만 쓴다면 text 취급을 하여 아래와 같이 나온다.

중괄호를 쓰지 않았을 경우

또, return에선 if문과 같은것을 쓸 수 없기 때문에 삼항연산자 등을 활용해야 한다.

삼항연산자 사용!

4. class 대신 className!

- class를 쓰게되면 콘솔창에서 오류를 또 만나볼 수 있다.

- className을 써야하고 id는 그대로 사용 가능하다.

- 우리가 className으로 작성하지만 실제 DOM에서는 class로 들어간다.

 

5. 인라인으로 style 주기

 

style 주는 예시

3번에서 자바스크립트 값을 가져오려면 중괄호 안에 작성해야 한다고 했고, 

리액트에서 스타일은 중괄호 안에 작성해야해서 두개의 중괄호가 들어간 것이다.

style 적용

 

css를 적용하는 또 다른 한가지 방법!!

변수 선언을 한 뒤 그 변수 안에 css를 작성하고 불러오는 방법 

div style 참고