React - props

parang·2025년 4월 2일

대망의 리액트가 시작되었다. 본격적인 공부를 하자마자 엄청난 위기가 왔지만 심기일전 해보자!

리액트는 여러 컴포넌트로 코드를 구상한다. 컴포넌트는 쉽게 말해서 함수와 같은 단위이다. 이렇게 코드를 짜게 되면 여러 사람이 협업하기 좋은 일명 유지보수 하기도 좋은 상태가 된다.

웹을 생성하지만 리액트는 html파일을 작성하지 않고,


함수 {
return html 내용
}
이런식으로 작성한다.

리액트에서 가장 중요한 2가지가 있는데 Props와 State이다.

Props란? 값을 전달하는 것.

상위 컴포넌트에서 만들어 하위 컴포넌트들로 값을 전달해주는 것을 말한다.

예를들어, 상위 컴포넌트인 App에서 하위 컴포넌트인 Header로 값을 전달하려고 한다. 그러면, App에서 헤더에

<Header title="WEB" title2="World Wide Web!" />

이런식으로 만들고,

<h1>{props.title}</h1>
{props.title2}

이런식으로 값을 넘겨주면 된다. 물론 props객체를 헤더 인자에 넣어준 다음에!

profile
파랑입니다.

0개의 댓글