[ React ] 함수 컴포넌트, JSX, Props & State

🐾 React 에는 클래스 컴포넌트 와 함수 컴포넌트 형태가 존재한다.
🐾 React 는 JSX 를 통해 Element를 생성한다.
🐾 React 는 Props 와 State 를 통해 컴포넌트의 상태 값을 다룬다.

🚀 Component

클래스 컴포넌트

Life Cycle (생명 주기 기능)과 Props, State 를 사용한다.

함수 컴포넌트

초기 마운트 속도가 상대적으로 클래스 컴포넌트보다 빠르고, 불필요한 기능이 없으므로 메모리 자원을 절약할 수 있다.

📌 함수 컴포넌트에서도 클래스 컴포넌트의 생명 주기 메서드들과 State를 연결할 수 있는 HOOKS를 사용해 State를 사용할 수 있다.

🔎 클래스 컴포넌트의 Life Cycle과 함수 컴포넌트의 HOOKS에 관해서는 다음 글에서 확인할 수 있다.

🚀 JSX

리액트에서는 Javascript의 모든 기능을 갖춘 JS의 확장 문법인 JSX를 이용하여 엘리먼트를 표현하고 생성한다. 표현하는 데에는 다음과 같은 규칙이 존재한다.

• 태그는 꼭 닫혀야 한다.

• 2개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져야 한다.
  ( 주로 div, Fragment , <> 등을 이용한다. )

• 조건부 렌더링 : 삼항 연산자 or AND 연산자를 이용해야한다.
  ( if문을 사용할 수 없다. )

• style 은 객체 형태로, 클래스의 이름을 설정하는class 는 className 가 대신한다.
  - 대쉬 대신 두 문자 이상은 첫번째 문자 대문자!
  

🚀 Props & State

Props 는 Javascript에서 함수의 인자값과 같은 역할로, 함수 or 클래스에 인자를 제공하고 React 엘리먼트를 반환할 수 있게 한다.

• 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로, 변경 불가

State 는 Props와 유사하지만 비공개적이고, 컴포넌트 내부에서 변경할 수 있는 제어 가능한 데이터의 상태 값이라고도 한다.

• 컴포넌트 내부에서 선언하여 변경할 수 있는 값
  💡 State의 값은 setState을 통해 변경한다.
  💡 setState은 객체로 전달되는 값만 변경한다.