[React] 기초 개념 정리

 

데이터와 화면을 연결하는 방법 
유저 인터페이스를 상태로 관리할 수 있다.

리액티브
특정 값에 의존해서 자동으로 반응한다. 

가상돔
브라우저가 HTML, CSS로 화면을 그리는 과정,
자바스크립트로 돔 구조를 변경하면 레이아웃을 다시 계산해 픽셀로 화면에 다시 그린다.
즉, 자주 호출시 브라우저 렌더링 성능에 영향을 준다.

그럼 어떻게 개선할 수 있을까?

가상돔을 사용한다. 

JSX
자바스크립트의 확장 문법이며, UI 코드의 가독성을 높여준다. 

 

 

컴포넌트
UI를 나타내는 엘리먼트와 어플리케이션 로직을 포함한 상위개념이다.
입력 값이라는 상태를 기억하려는 것이다.


State

: 상태관리를 위한 내부변수이다.
- setState() 메서드 사용.

 

 

이벤트 처리

: 상태를 갱신하기 
- 리엑트에서 이벤트를 처리하는 함수는 handle함수명으로 지정한다.

 

조건부 렌더링
- 엘리먼트 변수를 사용하는 방식
- 삼항 연산자를 사용하는 방식
- && 연산자를 사용하는 방식 

 

리스트와 키
: 키는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야한다.

- id를 넣기, index는 최후의 수단으로 담는게 좋음.