React 입문

React Component

• UI를 표시하는 최소 단위
• 특정 부분이 어떻게 생길지 정하는 선언체
• JavaScript 함수와 유사
• import와 export를 활용하여 컴포넌트를 가져오거나 내보낼 수 있음
• return 아랫부분에 JavaScript와 Xml을 합한 JSX 문법을 통해 화면에 보여질 코드 작성

Props

• 컴포넌트 간의 정보 교류 방법
• 부모 => 자식 방향으로만 전달

props 추출

구조 분해 할당을 통하여 props 내부값 추출 가능

State

• 컴포넌트 내부에서 바뀔 수 있는 값
• 단순 변수가 아닌 state가 바뀌어야 react는 변경점을 인지하고 화면에 render 해줌

불변성

메모리에 있는 값을 변경할 수 없음을 의미

• 원시데이터(문자,숫자,불리언) : 같은 값 => 같은 메모리 공간에 저장하고 주소를 공유
• 객체,배열,함수 : 같은 값 => 다른 메모리 공간에 저장하고 각기 다른 주소를 가짐

데이터 수정시

• 원시데이터 : 바라보는 주소가 바뀜 => 데이터의 값 자체가 바뀌는게 아님 (불변성o)
• 객체,배열,함수 : 바라보는 주소는 동일 => 데이터의 값이 바뀜 (불변성x)

주소가 바뀐다 => state가 변경된다. => react가 인지하고 변경사항을 렌더링해준다.
불변성을 가지면 값이 아니라 주소가 바뀐다.
불변성이 없는 데이터가 불변성을 가지려면 새로운 객체를 생성한다!