개발하는데 다 이유가 있겠지

React는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 건네는 단방향 데이터 흐름을 가집니다.

Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.

props가 불변이기 때문에 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.

import React, { useState } from 'react';

function ParentComponent() {
    const [name, setName] = useState('Original Name');

    const handleClick = () => {
        setName('New Name');
    };

    return (
        <div>
            <ChildComponent name={name} />
            <button onClick={handleClick}>이름 변경</button>
        </div>
    );
}

function ChildComponent(props) {
	props.name = "New Name";	// 오류 발생
	return <div>{props.name}</div>;
}

---

state는 컴포넌트 내부에서 관리되는 데이터입니다.

state는 setter 함수에 의해 동적으로 변경될 수 있으며, 컴포넌트의 렌더링에 영향을 미칩니다.

state가 업데이트되면 컴포넌트는 리렌더링되고, UI가 업데이트가 됩니다.

state는 주로 사용자 입력이나 API 요청에 대한 응답에 따라 변하는 데이터를 관리할 때 사용합니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

---

 props와 state의 차이점

• props : 외부(부모 컴포넌트)에서 전달받는 데이터로, 컴포넌트 내부에서 변경할 수 없습니다.
• state : 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트 내부에서 변경할 수 있습니다.

---

props가 자식 컴포넌트에서 변하지 않는 이유는 무엇인가요?

• 리액트는 단방향 데이터 흐름의 원칙을 지닌다. (부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달)
• props는 읽기 전용 데이터이다. (특정 상태가 어디서 어떻게 변했는지 예측할 수 있어 디버깅하기 쉬움)
• props가 불변이기 때문에 외부 입력에 의존할 뿐 내부적으로 변경하지 않아 재사용성이 높아지고, 코드의 캡슐화가 강화된다.

---

만약 자식 컴포넌트에서 부모 컴포넌트로부터 받은 props를 변경해야 한다면?

상태 끌어올리기를 해야 한다. 부모 컴포넌트로부터 받은 props를 다시 부모 컴포넌트로 올려 수정한 뒤, 다시 props를 전달받는 방식으로 구현해야한다. 이렇게 하면 단방향 데이터 흐름이 유지되고, 상태는 부모 컴포넌트가 관리해 일관성을 유지할 수 있다.

 

답변 : 
리액트는 컴포넌트 기반의 UI 개발 라이브러리로, 단방향 데이터 흐름을 특징으로 합니다. 이러한 데이터 흐름은 props와 state라는 두 가지 주요 개념을 통해 구현됩니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 읽기 전용 속성입니다. 자식 컴포넌트는 props를 수정할 수 없으며, 부모 컴포넌트에서 제공하는 데이터를 기반으로 렌더링됩니다. props는 컴포넌트 간의 데이터 전달을 효율적으로 관리하고, 컴포넌트의 재사용성을 높이는 데 기여합니다.

state는 컴포넌트 내부에서 관리되는 변경 가능한 데이터입니다. state는 컴포넌트의 상태를 나타내며, state가 변경되면 컴포넌트는 재렌더링됩니다. state는 사용자의 입력, 서버 통신 등을 통해 변경될 수 있으며, 컴포넌트의 동적인 UI를 구현하는 데 필수적인 요소입니다.

props drilling은 props를 여러 단계의 중간 컴포넌트를 거쳐 전달해야 할 때 발생하는 문제입니다. 이는 불필요한 리렌더링을 유발하고 코드 가독성을 저하시킬 수 있습니다. 이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용합니다. 저는 zustand를 주로 사용하는데, zustand는 간결하고 유연한 API를 제공하여 전역 상태를 관리하기 용이합니다. 특히, 중첩된 컴포넌트에서도 쉽게 상태에 접근하고 변경할 수 있다는 점이 장점입니다.

예를 들어, 로그인 상태를 관리하는 경우, 모든 컴포넌트에서 로그인 상태에 접근해야 한다면 props drilling을 통해 상태를 전달해야 합니다. 하지만 zustand를 사용하면 전역 상태에 로그인 상태를 저장하고, 필요한 컴포넌트에서 해당 상태를 조회하여 사용할 수 있습니다. 이렇게 하면 props drilling 문제를 해결하고 코드를 더욱 모듈화할 수 있습니다.