React - jsx props 활용하여 컴포넌트 만들기

npx create-react-app을 한 후에

components 폴더를 만들어서 내가 원하는 이름의 js 파일을 만들어준다.

컴포넌트라는 말이 리액트에서 뭔가 있어보이기도 하는데

그냥 자바스크립트에서 하나의 함수에 불과하다고 생각하면 된다. 

소비지출을 만드는 항목을 만들기 위해 ExpenseItem.js라는 컴포넌트를 만들어준다.

이 안에는 날짜와 항목 그리고 가격을 나타내는 div를 만들어준다.

 

잘 보면 ExpenseItem 뒤에 date, title, amount라는 항목이 있다. 

 

어 저기는 arguments가 들어가는 자리인데?

 

맞다. 

 

리액트에서는 props라는 이름으로 arguments 자리에 들어가는 녀석들이 있다. 

 

이름은 내 맘대로 짓고 컴포넌트를 사용할 때 data, title, amount를 받아올려고 만든 것이다. 

아래 예시를 보면서 살펴보자.

리액트도 자바스크립트를 기반으로 하고 있기 때문에

jsx여도 javascript에서 사용하던 것들을 모두 사용할 수 있다. 

위에서 props로 받을 녀석들의 모음집을 array로 불어왔다.

map이라는 녀석이 보이는데 일단 건너 뛰고

<ExpenseItem/> 안에 date, title, amount에 각각 데이터가 들어가는 것을 보자.

 

위에서 만든 컴포넌트들을 렌더링할때 date, title, amount의 데이터를 받아온다는 뜻이다. 

 

컴포넌트에서 props의 이름을 정해주지만

부모(?)격의 파일에서 데이터를 넣어주는 방식이다.

 

바닐라 js에서 일일이 createElement, appendChild하는 노동을

훨씬 효율적으로 해주게 도와주는 도구가 바로 props다.