Controlled and Uncontrolled components

오정진 Jeongjin Oh·2023년 4월 30일

제어와 비제어 컴포넌트에 대해 알아봐요
React 공식문서의 설명을 참고하면서 작성했습니다.

controlled components

  • 부모 컴포넌트에서 props로 “중요 정보”를 넘겨줌
  • 부모 컴포넌트에서 자식의 행동(상태)를 다룸 → 부모컴포넌트에서 제어 컴포넌트의 행동을 완전하게 다루게됨
  • more flexible
  • 그러나 부모컴포넌트에서 제어 컴포넌트(자식)에 완전하게 그 컴포넌트의 행동에 대한 설정을 해줘야함

uncontrolled components

  • 컴포넌트가 자체적으로 state를 관리해 부모컴포넌트에서는 그 상태를 관리할 수 없음
  • 부모컴포넌트에서 따로 컴포넌트에 넘겨줄 props이나 기타 설정을 하지 않아도되기 때문에 비제어 컴포넌트를 사용하기 쉬움
  • 그러나 less flexible함

In practice, “controlled” and “uncontrolled” aren’t strict technical terms—each component usually has some mix of both local state and props. However, this is a useful way to talk about how components are designed and what capabilities they offer.

실제로 제어(controlled)와 비제어(uncontrolled) 는 엄격한 기술적인 용어가 아니다 - 각각의 컴포넌트는 보통 local state와 props을 모두 섞어서 가지고 있다. 하지만 제어와 비제어는 어떻게 컴포넌트를 설계하고 컴포넌트가 특정 목적을 수정하기에 적합한 능력을 제공하는지 이야기하는 유용한 방법이다.

When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state).
컴포넌트를 작성할 때 어느 정보가 제어되어야 하는지(props를 통해), 어느정보가 제어되지 말아야하는지(state를 통해)를 고려해라.

profile
사람의 마음을 움직일 수 있는 글을 쓰고 싶어요

0개의 댓글