리액트 기초(하나하나 따라해보기) 8편

오늘은 리액트에서 가장 중요한 개념인 props 에 대해 배워볼 예정이다.

 

우리가 이전 시간에 만들어 본 modal 컴포넌트의 경우 App()이라는 함수 바깥에 있기 때문에 App()안에서 선언한 state 변수들을 가져다가 사용하기 힘들었다.

 

사실상 App() 안에서 Modal 컴포넌트를 사용하기 때문에 App() 은 부모고 Modal은 자식이다.

 

부모 컴포넌트의 정보를 자식컴포넌트에 넘겨주는 방법이 props라는 방법이다.

 

이제 문법에 대해 설명하겠다.

 

사용 하는 방법은 컴포넌트 이름옆에 넘겨주고 자식 컴포넌트에서 사용할 이름을 적고 이에 대비하여 넣을 state 변수 이름을 넣는다.

 

이렇게 설명하면 잘이해가 안될테니 사진을 첨부한다.

 

 

12번째 줄에보면 반복이라는 변수에 3가지 값이 저장된 것을 볼 수 있다.

 

 

이 반복이라는 변수를 새로운 이름을 할당하여 넣어준다. 지금은 글제목이라고 했지만

 

사실 반복={반복} 이렇게 자주 해준다고한다. 변수명이 헷갈리기 때문.

 

어쨋든 왼쪽에 어떤 변수명을 적던 그 변수로 자식 컴포넌트에 내려준다.

 

따라서 

 

 

이렇게 props로 매개변수를 주고 96번째 줄에 사용한 것처럼 props.글제목[0]을 찍어보면 

고양이 캣타워가 모달창에 뜬다.

 

추가로 이런것도 가능하다.

 

props 로 내려줄때 color 도 내려주고 아래 스타일 지정에서 해당 color 를 사용하면 스타일에도 똑같이 적용이 가능하다.

 

state 변경 함수도 props로 전달이 가능하다.

 

이렇게 반복함수를 글제목함수라는 이름으로 전달해주고 버튼을 클릭하면 글이 수정되게 만들 수도 있다.