[React] React의 State, Props, Ref의 역할

제어 컴포넌트와 비제어 컴포넌트

---

내부 변수 역할을 하는 State & 파라미터 역할을 하는 Props & React 독립적 Ref

React Hook 은 함수 컴포넌트를 사용하여 개발하고 함수형 프로그래밍 패러다임을 도입했다.

따라서 하나의 컴포넌트를 하나의 함수로 생각한다면, State & Props & Ref 세 가지를 모두 이해하기가 훨씬 쉽다. 

 

1. State: 내부 변수 (제어 컴포넌트)

• State는 컴포넌트의 내부 상태를 나타내는 변수로, React에서 직접 관리하는 변수이다.
• State 변경 시 리렌더링 발생: React는 state가 변경될 때 해당 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 유지한다.
• 내부 변수의 의미:
  • State는 컴포넌트 내부에서만 관리되며, 다른 컴포넌트에서는 직접 접근할 수 없다.
  • 상태가 변경되면 자동으로 리렌더링되기 때문에, UI가 항상 상태와 동기화된 상태로 유지된다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // count는 state, setCount는 state 변경 함수

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

• 위 코드에서 `count`는 state로, 클릭할 때마다 값이 변경되며 리렌더링이 발생한다.

---

2. Props: 파라미터

• Props는 부모 컴포넌트가 자식 컴포넌트로 전달하는 데이터이다. 함수의 파라미터처럼 동작한다.
• 불변(Immutable): Props는 전달된 값을 변경할 수 없으며, 오직 읽기 전용이다.

React 공식문서 (https://ko.legacy.reactjs.org/docs/components-and-props.html)

 

⚠️추후에 나오는 State Lifting(상태끌어올리기)에서는 자식 컴포넌트가 부모 컴포넌트의 상태를 변경한다.

props가 읽기 전용이라고하는 것은 props로 넘기는 값은 변경되지 않는다는 뜻일뿐, State Lifting을 위해 setState함수를 파라미터로 전달하는 것은 문제가 없다. 함수는 변하지 않기 때문에 props로 넘겨도 읽기 전용은 여전하다.

→ State Lifting은 자식 컴포넌트는 props를 수정하는 의미가 아니라 부모한테 받은 함수를 사용하여 부모의 상태를 변경하는 것.

 

• 상위 컴포넌트에서 데이터 전달:
  • 부모 컴포넌트는 자식 컴포넌트에 데이터를 전달할 때 Props를 사용한다.
  • 자식 컴포넌트는 Props로 전달받은 값을 사용하여 렌더링을 수행한다.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;  // name은 props
}

function App() {
  return <Greeting name="John" />;  // 'John'이 props로 전달됨
}

• 여기서 `name`은 부모 컴포넌트에서 전달된 props로, 자식 컴포넌트에서 이를 사용해 화면에 출력한다.

---

3. Ref: 외부 변수 (비제어 컴포넌트)

• Ref는 React가 직접 관리하지 않는 변수로, 컴포넌트의 DOM 요소나 외부 상태에 접근할 때 사용된다
• Ref 변경 시 리렌더링 없음: Ref의 값이 변경되더라도 컴포넌트가 리렌더링되지 않는다. 이는 React가 Ref의 변경을 인식하지 않기 때문이다.
• 외부 변수의 의미:
  • Ref는 주로 DOM 요소에 접근하거나, 컴포넌트 외부의 데이터에 접근할 때 사용된다.
  • 값이 변경되어도 컴포넌트는 리렌더링되지 않으며, 이 값을 직접 참조하여 원하는 동작을 수행할 수 있다.

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);  // ref로 DOM 요소 참조

  const onButtonClick = () => {
    inputEl.current.focus();  // input에 포커스 설정
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• 위 코드에서 `useRef`는 DOM 요소를 참조하는 역할을 하며, input에 포커스를 줄 수 있다. Ref가 변경되더라도 컴포넌트는 리렌더링되지 않는다.

---

State, Props, Ref 차이점 정리

구분	State	Props	Ref
역할	컴포넌트 내부 상태 관리	부모컴포넌트에서 전달된 데이터	DOM요소나 외부 상태 참조
리렌더링	상태 변경 시 리렌더링 발생	리렌더리 발생(변경 자체는 불가능)	Ref 변경 시 리렌더링 발생하지 않음
제어방식	컴포넌트 자체에서 관리, 변경 가능	부모 컴포넌트에서만 변경 가능	외부 데이터 참조, 변경 가능하나 UI에 영향 없음

 

---

ℹ️참고

[ASAC 6기 강의자료]