[React] 자식 컴포넌트에서 부모 컴포넌트에 있는 state 값 변경하기

부모 컴포넌트에 있는 값을 변경해주기 위해서는 자식 컴포넌트에 Props을 내려주게 된다. 하나의 방법으로 useState의 set 함수를 내려주어 부모의 state 값을 직접 바꾸는 모습을 볼 수도 있지만, 그것보다는 부모 컴포넌트에서 state 값을 변경하는 함수를 작성하고 자식 컴포넌트에 이 함수를 전달하는 방법이 안전한 것 같다.

 

728x90

 

---

 

부모 컴포넌트

import React, { useState } from "react";
import Child from "./Child";

function Parent() {
    const [search, setSearch] = useState(undefined);
    const changeSearch = (value) => {
        setSearch(value);
    };
    
    return (
        <div>
            <Child changeSearch={changeSearch} />
        </div>
    )
}

export defalut Parent;

자식 컴포넌트

import React from "react";

function Child({ changeSearch }) {

    return (
        <div>
            <input 
                type="text"
                onChange={(event)=> changeSearch(event.target.value)} /> 
        </div>
    )
}

export default Child;