[React] Component 와 Props

Juhyang·2022년 2월 27일
0

TypeScript + React

목록 보기
2/5

컴포넌트의 개념

  • 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수이다. 자바스크립트의 함수와 유사하다.
  • UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.
  • React를 구성하는 최소단위. (앞서 공부했던 엘리먼트는 컴포넌트의 일부이다.)
  • 컴포넌트의 이름은 항상 대문자로 시작

예)

function Hi(props){
 return <h1>hi! {props.name}</h1>;
}

const a = <h1>hi! react</h1>; // react 엘리먼트
const b = <Hi name="juhyang" />; //react 엘리먼트로 사용자 정의 컴포넌트 사용, props로 name 전달 

컴포넌트 생명주기

Mount
- 컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 (부착 될 때)

Update
- props또는 state가 변경되면 갱신이 발생한다. 컴포넌트가 리렌더링 될 때 순서대로 호출된다.

Unmounting
- 컴포넌트가 DOM에서 제거될 때 호출된다.

Props 사용시 주의사항

모든 React 컴포넌트는 Props를 다룰때 순수함수(읽기전용)처럼 사용해야한다.

function sub(n1, n2) { 
  return n1 - n2; 
}

순수 함수란?
1. input을 바꾸려 하지 않고 동일한 output을 리턴한다.
2. 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는다.
3. 함수형 프로그래밍의 핵심 개념이다.

순수 함수가 아닌 경우

function objectSub(target, m) {
  target.key -= m; 
}

위 코드는 input으로 들어온 target 값(부모로 부터 받은 props)을 바꾸려고 하고 있다.
이는 외부의 target 값도 바꿀 수 있으므로 (외부에 영향을 주는 행위) 순수 함수가 아니다.

기능적으로 변화가 필요하다면 state를 사용해야한다.

Props vs State

  • props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다.
    어떠한 값을 컴포넌트에 전달해 줘야 할때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없다.

  • state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 동적인 데이터를 다룰 땐 state를 사용한다.

즉, 컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고받고 변경되는 값은 state만 확인하면 된다.

profile
kurly - commerce web development

0개의 댓글