JSX

1. jsx란

• js의 확장 문법이다 (웹 브라우저는 읽을 수 없다)
• js파일이 jsx코드를 포함하고 있으면 파일을 컴파일 해 주어야 한다.
• js의 요소들처럼 다루어 진다
  
  

2. 표현식

    - const h1 = <h1>Hello world</h1>; 
    →html 혹은 js 처럼 보이지만 js 파일 안에서 작동하는 jsx문법이다
    - const panda = <img src='images/panda.jpg' alt='panda' width='500px' height='500px' />; 

→ html문법처럼 요소를 가질 수 있다.

• 가독성을 위해서 줄바꿈을 해 주어야하고, 여러줄의 경우에는 ()안에 넣어주어야 한다.

• jsx표현식의 첫 번째 여는 태그와 마지막 닫는 태그는 동일한 jsx요소에 속해야 한다 (첫번 째 코드는 작동을 하지만 두번 째 코드는 작동하지 않는다)
  
  
  
  

3. 랜더링 방법

• 랜더링 표현식을 넣어주어야 화면에 표시된다.
  
  ReactDOM.render()는 제일 많이 사용되는 jsx를 랜더링하는 방법이다. ()의 첫번째 요소로는 꼭 jsx의 표현식 또는 jsx표현식으로 평가되는 변수를 써야하고 두번째 요소에는 html의 어디 부분에 코드를 넣어줄지를 적는다.
  
  

4. class vs className

• JSX는 주로 HTML과 같은 문법을 쓰지만, 속성으로 class대신 className을 써준다
  
  
  

5. Self-Closing tag

• HTML에서는 self-closing tag에 “/”를 적어도 안적어도 되지만 JSX에서는 꼭 적어 주어야 한다.
  
  

6. 계산식

• {}를 써 주지 않으면 텍스트로 인식한다
  
  

7. 변수

• {}를 사용하면 밖에 선언된 변수에도 접근 할 수 있다
  
  

8. 조건문

• JSX에서는 조건문으로 삼항연산자를 사용한다
• A ? b: c A가 true라면 b, 아니라면 c를 실행한다
  
  
  

9. Conditionals: &&

• &&의 왼쪽에 있는 식이 true일 때, &&의 오른쪽에 있는 식이 랜더 된다.
  
  

10. map()

• 위의 코드는 배열 Strings를 li의 새로운 배열로 반환한다.
  
  

11. Keys

• JSX에서 list를 만들려면 keys가 필요하다.
  • key는 JSX 속성의 이름이다. 속성의 값은 고유해야 한다. html에서의 id 속성과 비슷하다.(꼭 사용해야 하는건 아니다)
    • key는 랜더링 할 다음 아이템을 확인하기 위해서 key 속송을 사용한다

고유한 키값을 주기 위해서 map()을 사용하고 매개변수로 i를 주었다

12. JSX를 사용하지 않아도 React를 작성할 수 있다