State - Props - Childen

최종 수정 : 2024-04-09

 

props

properties을 줄인 표현으로, 컴포넌트 속성을 설정하는 정보를 담고 있는 자바스크립트 객체이다. 이에 따라, 컴포넌트의 모습과 속성을 결정한다. 즉, 리액트 컴포넌트가 엘리먼트를 생성하기 위해 사용하는 값이다. 부모 컴포넌트에서 자식 컴포넌트로 전달되며, props는 부모 컴포넌트에서 설정할 수 있다. 해당 컴포넌트는 props를 읽기 전용으로만 사용할 수 있어서, 부모 컴포넌트에서 바꾸어 주어야만 반영된다.

 

또한, pure 함수의 조건을 만족시킨다. pure 함수란 입력값을 변경하지 않으며, 같은 입력값에 대해 항상 같은 출력값을 낸다. props는 직접 값을 변경할 수 없으므로 조건을 만족한다.

 

children

props의 일종으로, 부모 컴포넌트에서 해당 컴포넌트에 대한 값을 정해준다. 컴포넌트 태그 사이의 내용을 보여 주는 props 값을 작성한다.

...
  render (
    <>
      <Component name="A" />
      <Component name="B" /> props 사용
      <Component>children</Component> // children 사용
    </>
  )
};

 

defaultProps

부모 컴포넌트에서 props 값을 따로 지정하지 않았을 때 보여줄 기본값을 말한다.

 

propTypes

컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propType를 사용한다. 

import PropTypes form 'prop-types';

const MyConponent = ({ name, children }) => {
  return (...);
};

MyComponent.defaultProps = { // defaultProps 사용
  name: '기본 이름';
};

MyComponent.propTypes = { // defaultProps가 명시되어야 사용가능하다.
  name : PropTypes.string
};

export default MyComponent;

이렇게 작성하면, name 값은 무조건 문자열(string) 형태로 전달해야 함을 의미한다.

 

defaultProps와 propTypes는 꼭 사용해야 하는가?

필수 사항은 아니지만, React를 사용해 큰 규모의 프로젝트를 진행한다면, 해당 컴포넌트에 어떤 props가 필요한지 쉽게 알 수 있어 개발 능률이 좋아진다.

---

state

리액트 컴포넌트의 상태를 의미한다. 더 정확히는, 리액트 컴포넌트의 변경 가능한 데이터라는 의미에 가깝다. 하나의 컴포넌트 안에서 전역 변수처럼 사용되며, 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

 

함수 컴포넌트에서는 useState()를 사용하여 state 값을 조작한다. state가 변경될 경우 컴포넌트가 재런더링되기 때문에, 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있다.

 

배열이나 객체를 업데이트해야 할 때는, 사본을 만들고 그 사본에 값을 업데이트 한다. 그 다음에 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트 한다.

	props	children	state
객체	O	X	O
렌더링	O	X	O
읽기 전용	O	O	X
컴포넌트를 구성하는 내용	O	O	O

 

Q. 부모로부터 전달받은 props는 해당 컴포넌트의 state일까?

-> 아니다. 컴포넌트의 내용을 구성한다는 측면에서는 맞겠지만, 근본적으로 props는 값을 변경할 수 없기 때문에 state라고 말할 수 없다.

 

Q. props와 children의 차이는 무엇인가?
-> 둘 다 부모 컴포넌트에서 값을 전달한다는 점에서는 동일하다. 그러나 props는 속성 값에 따라 다른 값을 지닌 컴포넌트가 만들어지지만, children은 직접 하드코딩해준 것이므로 변경이 불가능하다.

 

Q. props와 state의 공통점은 무엇인가?

-> 컴포넌트의 내용을 구성하는 값으로서 동일하며, 전달되는 데이터 타입은 '객체'이다.

---

참고 자료

리액트를 다루는 기술 (p.92-117)

초보자를 위한 리액트 200제 (개념 22, 24)

소플의 처음 만난 리액트 (p.143-182)

 

https://kindjjee.tistory.com/102