[React] Component에 대한 이해

Component란?
앱을 이루는 최소한의 단위

- UI는 재사용 가능한 개별적인 여러 조각으로 나눔(각 조각을 개별적으로 나누어 코딩)

- props 혹은 state 값을 입력받아 DOM 노드 생성(* DOM: 브라우저가 html을 인식하는 방식을 계층화해 트리구조로 만든 모델)

- 이름은 항상 대문자(소문자로 시작하는 컴포넌트는 DOM 태그로 취급)

 

Component 선언 방식

- 클래스형 과 함수형

→ 리액트 메뉴얼에서 권고하는 방식 : 함수형 + Hooks

클래스형 컴포넌트와 함수형 컴포넌트

 

모듈(분리한 컴포넌트)를 내보내기(export)

 

모듈(분리한 컴포넌트)를 불러오기(import)

 

반복되는 형태의 코드 → Map() 함수로 관리

Map() : 파라미터로 전달된 함수로 배열 내 각 요소를 원하는 규칙에 따라 변환해 그 결과로 새로운 배열 생성

arr.map(callbackFunction(currentCalue, index, array), [thisArg])

- callbackFunction : 새로운 배열 요소를 처리하는 함수

- currentValue : 현재 처리하고 있는 요소

- Index : 현재 처리하고 있는 요소의 index 값

- array: 현재 처리하고 있는 원본 배열

- thisArg: callback 함수 내부에서 사용할 this 레퍼런스

 

Map() 예시

리액트에서의 key

- 변동된 원소를 알아내기 위함

key 설정

- Map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하는 것과 같이 설정

const nameList = names.map((name,index) => <li key={index}>{name}</li>

- key값은 언제나 유일 

- 데이터가 가진 고윳값을 key값으로 설정

 

Props (Properties)

컴포넌트 속성 설정 시에 사용하는 요소

- props의 값은 부모 컴포넌트에서 설정해줌

- 자식 컴포넌트를 수정하여 랜더링

 

defaultProps : 별도의 props 값이 없는 경우 보여주는 기본 값

 

State

컴포넌트 내부에서 바뀔 수 있는 값

- 함수형 컴포넌트 → useState 라는 함수를 통해 사용

- 클래스형 컴포넌트 → 지니고 있는 state

 

useState

const [message, setMessage] = useState("초기값")

- 다음과 같이 배열의 첫번째 원소에는 현재 상태 저장

- 배열의 두번째 원소에는 상태를 바꿔주는 setter 함수

- 함수 인자에는 상태의 초기값

 

Props 와 State