2장. JSX

JSX: Javascript의 확장 문법으로 XML과 매우 비슷하게 생김.

 

장점

1. 보기 쉽고 익숙함: HTML 코드 작성하는 거랑 비슷해서 좋음.

2. 더욱 높은 활용도: HTML 태그들을 컴포넌트 작성할 때 그대로 사용할 수 있기에 편함.

 

- React 컴포넌트에서는 요소 여러개를 왜 하나의 요소로 꼭 감싸줄까?

: 'Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다' 는 규칙 때문.

 

 

배운 JSX 문법

1. JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없음.

2. &&, ||로 조건부 렌더링

//아래는 null을 쓰는 식으로 조금 의미없는 코드를 쓰지만...
{name==='리액트' ? <h1> 리액트입니다.</h1>:null}

//아래는 그런 과정없이 짧은 코드로 구현
{name === '리액트' && <h1>리액트입니다.</h1>}

이런 식으로 조건이 만족하면 뒤에 값을 리턴하도록 하는 코드를 짤 수 있고,

{name||'값이 undefined입니다'}

이런식으로 조건이 만족하지 않으면 뒤에 값을 리턴하도록 하는 코드를 짤 수도 있다.

 

즉, 삼항 연산자 대신 이런 방식으로 짜는게 보기 좋은 코드다!

 

3. 스타일링 방식

- 인라인 스타일링은 최대한 줄이고 styled-component 방식으로 구현하는 것이 좋다.(특히 플젝에서)

 

- className으로 css 먹히는 방식

-> 

src/App.css

.react {
	background: aqua;
    ...
    ...
}

이런 식으로 적어서 원하는 컴포넌트에서 css파일을 import 해와서 className='react' 처리해준 태그에서 적용할 수 있음.

 

4. 주석 

{/* */}

=> 이런 방식 선호. ∵ 나중에 해당 방식의 주석은 인덱싱해서 다른 컴포넌트에서 function의 용도를 참조할 수 있는 reference 기능을 제공해주기 때문.