react 자식요소에 값 전달하기(props)

props 란 ?

props는 컴포넌트에 값을 전달해줄 때 사용한다. 넘겨줄 수 있는 값은 변수, 배열, 객체, 함수 등 자바스크립트 요소 모두 가능하다. 하지만 props는 읽기 전용이다 또한 데이터는 부모요소에서 자식요소로 밖에 전달이 되지 않는다.

예제

function app () {
	let logo = "React Blog";
    let [title, reName] = useState(["남자코트 추천", "강남 우동 맛집", "react 독학"]);
    let [count, countUp] = useState([0,0,0]);
    let [modal, setModal] = useState(false);

	{

       title.map(function (v, i) {
                    return (
                        <div className='list' key={i}>
                            <h4>{v} <span onClick={() => {
                                let copyCount = [...count];
                                copyCount[i] = copyCount[i] + 1;
                                countUp(copyCount);
                                console.log(`count : ${count} / copyCount : ${copyCount}`);
                            }}>❤️</span> {count[i]}개</h4>
                            <p onClick={() => { modal == true ? setModal(false) : setModal(true) }}>2월 17일 발행</p>
                        </div>
                    )
                })
            }

            {
                modal == true ? <Modal shirts={title} setShirts={reName}/> : ''
            }
}

function Modal(props) {
    return (
        <div className="modal">
            <h4>{props.shirts}</h4>
            <p>날짜</p>
            <p>상세내용</p>
            <button onClick={() => {
                let copy = [...props.shirts];
                copy[0] = "여자코트추천";
                props.setShirts(copy);
            }}>버어튼</button>
        </div>
    )
}

위와 같은 예제를 봤을때 state가 app.js 에 선언이 되어있어 자식이 되는 Modal 에 받을려면 props를 사용해야한다.

사용법

1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명