TIL) 자식에서 부모 컴포넌트로 소통하는 방법(state 끌어올리기)

 

useState

const [changeData, setChangeData] = useState('')

useState는 리액트 라이브러리에서 제공하는 함수인데 컴포넌트 함수가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 state로 값을 정의할 수 있게 해주는 함수이다. 

 

state가 변할 때, 이 컴포넌트 함수를 다시 호출하고 싶으면 state를 업데이트하는 함수(set어쩌고)를 호출하면 된다.

왜냐하면 그 함수를 호출해서 state에 새로운 값을 할당하고 싶다고 리액트에게 말하고 그런 다음 함수는 또한 useState로 state가 등록된 컴포넌트는 재평가되어야한다고 리액트에게 말한다. 

그래서 리액트는 이 컴포넌트 함수를 다시 실행하고 또한 이 JSX코드를 다시 평가한다. 그리고 지난 번과 비교해서 감지된 변화들을 화면에 나타내게 한다. 

 

---

state 업데이트가 이전 상태에 의존하고 있다면? 

 

👇아래 함수 폼 사용하기!👇

  const [userInput, setUserInput] = useState({

    enteredTitle: "",

    enteredAmount: "",

    enteredDate: "",

  });

 

setUserInput((prevState) => {

      return { ...prevState, enteredTitle: event.target.value };

    });

 

---

• 버튼의 타입이 submit 이라면 폼 대신에 클릭된다면, 전체 폼 요소는 수신할 수 있는 이벤트를 생략할 것이다. 그래서 submit에 반응하는 폼에서 폼이 제출될 때마다 일부 함수를 실행한다. 

 

• input안에 있는 value의 역할 => 모든 입력 요소들이 갖는 내부 값의 프로퍼티를. 설정할 것이다. 그리고 그것을 새로운 값으로 설정할 수 있다. 입력된 금액을 다시 전달하기 위해 value={enteredTitle}로 가리키게 할 수 있다. 

 

• 양방향 바인딩은 폼으로 작업할 때 유용하다. 예를들어, 폼 전송에 따라 사용자의 입력을 모으거나 변경할 수 있게 해주기 때문이다. 

---

자식에서 부모 컴포넌트로 소통하는 방법 = state 끌어올리기

=> props를 사용해서 부모 컴포넌트로부터 함수를 받고 자식 컴포넌트에서 그 함수를 불러온다. 

 

부모 컴포넌트에 아래처럼 써준다. 

const NewExpense = () => {

  const saveExpenseDataHandler = (enteredExpenseData) => {

    console.log(enteredExpenseData);

  };

  return (

    <div className='new-expense'>

      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />

    </div>

  );

};

 

 

자식 컴포넌트에 아래처럼 써준다. (props 써준다.)

리턴 전에 props.onSaveExpenseData(event.target.value); 를 써준다.

 

=> 부모 컴포넌트에서 함수를 호출할 수 있고, 매개변수로 데이터를 전달할 수 있다. 

=> 자식 컴포넌트에서 onSaveExpenseData() 를 호출할때 자식 컴포넌트에서 생성한 data를 (여기서는 expenseData) 인자로 전달할 수 있다. 

=> 그리고 그 값이 부모 컴포넌트에서 매개변수로 받는 값이다. (여기서는 enteredExpenseData)

 

 

형제 요소끼리 정보를 주고 받을 수 없다. 그래서 가장 가까운 부모를 활용한다. 

 

어디까지 끌어올려야 하지?

 

=> 컴포넌트 트리에서 필요한 만큼 끌어올리는데, 데이터를 생성하는 컴포넌트와 데이터가 필요한 컴포넌트에 접근할 수 있으면 된다. 

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓