본문 바로가기

JavaScript/React

React - ControlledComponent, UnControlledComponent

 

1. 왜 Controlled, UnControlled를 알아야 할까?

  • React는 컴포넌트가 상태(state)를 가지게 해서 각 컴포넌트가 독립적으로 동작하도록, 단일 소스로 관리하려는 설계 원칙을 가지고 있습니다.
  • 또한, props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 단방향 흐름을 지향합니다.
  • 위와 같은 원칙들은 <div>와 같이 데이터를 가지지 않는 엘리먼트를 사용할 땐 문제가 되지 않습니다.
  • 하지만, <input>. <textarea>, <select>와 같이 자체적으로 value를 가지는 엘리먼트에 접근하려면 document.querySelector를 사용하게 되고, 위의 원칙들을 위배하게 됩니다.
  • https://soldonii.tistory.com/145

 

React의 설계 원칙에 맞게 접근하기 위해 사용되는 방법으로 Controlled와 UnControlled 컴포넌트가 있고,

이들에 대해 간략히 알아보려 합니다.

 

----

 

1. ControlledComponent

  • 컴포넌트 내에서 상태를 사용하는 컴포넌트입니다.
  • 상태값에 따라 컴포넌트의 동작 방식이 결정될 때 이 방법을 사용합니다.

 

ControlledComponent.jsx

/* ControlledComponent.jsx */

import React from 'react';

class ControlledComponent extends React.Component {
  constructor() {
    this.state = {
      value: ''
    }
  }

  change = (e) => {
    this.setState({ value: e.target.value });
  }
  
  render() {
    return (
      <div>
        <input value={this.state.value} onChange={this.change} />
      </div>
    )
  }
}

export default ControlledComponent;

 

  • 위 컴포넌트는 <input>에 입력이 되었을 때, change 함수가 state 값을 변경해서 실시간으로 <input>에 값을 반영하고 있습니다.
  • 독립적 컴포넌트인 단일 소스 설계 원칙을 준수하는 걸 알 수 있습니다.

 

2. UnControlledComponent

  • 상태(state)를 가지지 않는 컴포넌트입니다.
  • 컴포넌트가 상태를 가지고 있지 않아도 되는데, <input>과 같이 value를 가지는 엘리먼트에 접근해야 할 때 이 방법을 사용합니다.

 

UnControlledComponent.jsx 파일 생성

/* UnControlledComponent.jsx */

import React from 'react';

class UnControlledComponent extends React.Component {
  inputRef = React.createRef();

  change = () => {
    console.log(this.inputRef.current.value);
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef} onChange={this.change} />
      </div>
    )
  }
}

export default UnControlledComponent;
  • 위 컴포넌트는 React.createRef 함수를 사용해서 <input>을 참조할 수 있는 변수를 만들고, 엘리먼트에 접근하고 있습니다.
  • 컴포넌트 내에서 독립적으로 동작하고, document.querySelector를 사용해 전역적으로 접근하지 않아도 되므로, 상위에서 하위로의 단방향 흐름을 유지할 수 있다는 걸 알 수 있습니다.

 

'JavaScript > React' 카테고리의 다른 글

React - 배포하기  (0) 2022.02.23
React - Hooks, Context  (0) 2022.02.08
React - Component Styling  (0) 2022.01.28
React - React Router DOM  (0) 2022.01.26
JSX - 기본 개념과 문법 정리  (1) 2022.01.22