JSX

JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JS의 확장 HTML과 비슷하게 생겼으나 JS이며 HTML과는 다른 부분이 있다.

Componenet

✔️React에서 페이지를 구성하는 최소단위
✔️ Componenet의 이름은 대문자로 시작
✔️ Class Componenet / Function Componenet로 나뉨
⭐️ 컴포넌트에 Attribute에 해당하는 부분을 Props라고 한다.
컴포넌트 안에 작성된 하위 Element를 children이며 결국 이것도 props 중 하나

🔍 컴포넌트끼리 데이터를 주고 받을 땐 Props
🔍 컴포넌트 내에서 데이터를 관리할 땐 State
🔍 데이터는 부모->자식으로만 전달

Props

기본적으로 componenet에 원하는 값을 넘겨줄 떄 사용한다.
넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JS의 요소라면 제한이 없다,
주로 Component의 ‘재사용’을 위해서 사용한다.
읽기전용이다. 전달받은 prps를 변경할 수 없다. 만약 props값을 변경해서 사용하고 싶다면 새로운 변수를 생성해야한다.

State

Component 내에서 유동적으로 변할 수 있는 값을 저장한다.
개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다.
State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분만 렌더링한다.
State값을 직접 변경할 시 react가 compnent를 다시 렌더링할 타이밍을 알아차리지 못한다. 반드시 setState함수를 이용해 값을 변경해야한다.