[React] 2. 속성 (Props)

Component 는 React 에서 html 태그를 가지고 있는 블록이라고 설명 했는데 여기서

각각의 블록은 상태 (State) 를 가지게 됩니다.

그리고 부모 컴포넌트가 가진 데이터를 속성(Props) 를 통해 자식 컴포넌트에게 전송 할 수 있습니다.

하지만 위에 그린 그림처럼 화살표는 무조건 위에서 아래로만 갑니다. (리듀서 or 리덕스를 사용하게 되면 조금 다릅니다.)

즉, 속성(Props)은 부모에서 자식 컴포넌트 방향으로만 가는 단방향 데이터이며,

또한 자식 컴포넌트는 부모에게 받은 Props를 수정 할 수 없습니다 (readonly)

또한 객체 형태로 전송하기에 여러 값을 보낼 수 있습니다.

간단하게 짜보면

최상위 App 컴포넌트에서 하위 컴포넌트인 Profile 이라는 컴포넌트에게 data 라는 key로 20이라는 값을 주고

그 값을 람다식을 통해 받으면

이렇게 값이 나옵니다.

조금 더 응용하면

import { useState } from 'react'
import './App.css'
import Input from './components/Input'
import Profile from './components/Profile'

function App() {

  const [count, setCount] = useState(1);

  const onClickButton = (value) => {
    setCount(count + value);
  };

  return (
    <div>
      <Input onClickButton={onClickButton}/>
      <Profile count={count}/>
    </div>
  )
}

export default App

 

const Profile = (props) => {
    return (
        <div>
            현재 {props.count}번 입니다.
        </div>
    )
}

export default Profile;

const Input = ({onClickButton}) => {
    return(
        <div>
            <button onClick={() => onClickButton(1)}>클릭</button>
        </div>
    )
}
export default Input;

 

App 파일에서 onClickButton , count 를 만든 후 

해당하는 변수들을 각각의 Props를 통해 컴포넌트로 보낸 뒤 

동작하게 하는 방식이다. 

 

props 는 부모 컴포넌트에서 자식 컴포넌트로 이동하는 단방향 데이터이자 읽기 전용이라는 것이 핵심이다.