ReactJS 필수 개념, props 알아보기

1. 개요

• 컴포넌트를 만들어서 쓰다보면 다른 컴포넌트에서 만든 state를 사용할 수 없다는 사실을 깨닫게 됨
• 그럼 모든 컴포넌트에서 같은 state를 쓰고 싶을때 각각의 컴포넌트에다가 state를 선언해야하나?
• 다행히도 리액트에는 props라는 개념이 존재함
• 부모 컴포넌트 안에 자식 컴포넌트가 들어있다면, props를 이용해 state를 전달할 수 있음
• 근데 제한사항이 있어서 자식 컴포넌트끼리 혹은 자식으로부터 부모 컴포넌트에게로의 전달은 불가능

•  

2. 코드

import {useState} from 'react'

function App(){
    let [글제목, 글제목변경] = useState(['1번제목','2번제목']);
    return(
        <div>
            <Babycomponent 글제목={글제목}/>
        </div>
    )
}

function Babycomponent(props)){
    return(
        <div>
            <h3>{props.글제목[0]}</h3>
        </div>
    )
}

• 위 예제코드에서 App이라는 컴포넌트와 Babycomponent라는 컴포넌트가 존재함
• 근데 App 안에서 Babycomponent를 썼음
• 이때 App은 부모컴포넌트고, Babycomponent가 자식컴포넌트임
• 아까 부모컴포넌트에서 선언한 스테이트를 자식컴포넌트에서 쓰려면 props란걸 써야 한다고 했음
• 그래서 Babycomponent를 만들 때 괄호 안에 props라는 텍스트를 넣어줬음
• 그러면 자식컴포넌트에서 부모컴포넌트에서 선언한 스테이트를 props.스테이트명 형태로 사용할 수 있음
• 단, 부모컴포넌트에서 자식컴포넌트 쓸 때 <Babycomponent 글제목={글제목}/> 요런 형태로, 자식컴포넌트명 옆에 props로 넘겨줄 스테이트명을 적어주면 됨

• 컴포넌트이름 옆 괄호에 props라고 선언해주면 됨
• 그담에 props.state명 형태로 스테이트 사용 가능
• 컴포넌트 사용할때는 컴포넌트 태그 안에 props로 쓸 스테이트 이름 적어주면 됨