React 값 전달(부모 → 자식, 자식 → 부모)

React Component 에서 값을 전달하는 방법이다.

자식 → 부모 데이터 전달

props : 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단

- 하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수 없다.

- 하위 컴포넌트에서 상위 컴포넌트가 전달해준 값에 접근할 수 있게 해준다.

 

const [스테이트 값, 스테이트 변경 함수] = useState(스테이트 초기값);

import React, {useState} from 'react';
import Child from "./Child";
 
const Parent = () => {
    const [data, setData] = useState(0);
    // 1. 부모 컴포넌트에서 useState 를 통해 전달받은 데이터를 저장할 변수를 선언한다.
    // 2. 부모 컴포넌트에서 props로 함수를 넣어주면,
    //    자식 컴포넌트에서 그 함수를 이용해 값을 전달한다.
 
    const parentFnc = (data) => {
      setData(data);
    }
 
    return (
        <div>
            <div>부모 컴포넌트 값 : {data}</div>
            <Child number={data} getData={parentFnc} />
        </div>
    );
};
 
export default Parent;

 

Child 컴포넌트

Event Handling

- camelCase 로만 사용할 수 있다. onClick, onMouseEnter

- 이벤트에 연결된 자바스크립트 코드는 함수이다. onClick={함수}

- 실제 DOM 요소들에만 사용 가능하다.

import React from 'react';
 
const Child = props => {
    const onClick = () => {
      console.log(props.number);
      props.getData(props.number + 1);
    }
 
    return (
        <div>
            <button onClick={onClick}>+자식버튼</button>
        </div>
    );
};
 
export default Child;

Child 컴포넌트를 아래와 같이 수정 가능하다.

import React from 'react';   const Child = props => {     const {number, getData} = props; // 비구조화 할당 문법       const onClick = () => {         console.log(number);         getData(number + 1);     };       return (         <div>             <button onClick={onClick}>+자식버튼</button>         </div>     ); };   export default Child;

 

import Parent from "./components/Parent";
 
function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}
 
export default App;

 

부모 → 자식 데이터 전달