[TIL] React 공부일기 #1

책 정리/요약 - 리액트를 다루는 기술(길벗)

리액트

페이스북 개발 팀이 만든 자바스크립트 라이브러리이다.
사용자 인터페이스를 만드는 데 사용한다.
리액트는 Virtual DOM 을 사용한다.

---

Virtual DOM

DOM에 변화 발생시 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트할때 시간이 걸린다. 그러나 Virtual DOM은 바뀐 부분만 실제 DOM에 적용시킨다. 그렇다고 Virtual DOM이 DOM의 상위호환인 것은 아니다! 리액트의 Virtual DOM을 안 쓰고 DOM만 쓰는 게 더 나은 성능을 보이는 경우가 있다.

---

JSX

자바스크립트의 확장 문법이다. 리액트로 프로젝트를 개발할 때 사용한다.
HTML 코드를 작성하는 것과 비슷해서 보기 쉽고 익숙하다. (<JSX를 사용하는 주된 이유)
자바스크립트보다 더욱 높은 활용도를 가지고 있다.

문법

HTML와 비슷하지만 다르다! 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 그림처럼 <div>와 </div>로 감싸지 않으면 오류가 발생한다. div말고도 Fragment 컴포넌트 선언 후 <Fragment>로 감싸줘도 좋다. 그냥 <> </>로 간단하게 감싸줘도 좋다!

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

1. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { } 로 감싸주면 된다.
2. 조건문을 쓰고 싶다? 그럴 땐 JSX 밖에서 if문을 사용하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용하자!
3. && 연산자는 조건부 렌더링을 할 수 있다.
4. undefined를 렌더링하지 말자. 오류가 발생한다. ( OR(||)연산자를 이용하면 오류를 방지할 수 있다. )
5. 리액트에서 DOM요소에 스타일 적용할 때엔 카멜 표기법( 예) backgroundColor:'black' )으로 작성한다.
6. HTML에선 클래스 사용 시 class="myclass" 이지만, 리액트에선 className="myclass" 로 쓴다.
7. 주석은 {/* ... */} 로 작성한다.

문법 차이를 잘 기억해 두고, 더 자세한 건 책을 보도록 하자!

---