지난 포스팅에서 글 제목을 누르면 모달창이 나타나는 기능을 만들었다.
그런데 모달창 내부에도 글 제목을 넣고 싶으면 어떻게 해야 할까?
이렇게 작성하면 될 것 같지만 post라는 변수가 정의되지 않았다는 에러가 뜬다.
왜?
왜냐하면 post라는 state는 function App()에 있는 것이지 function Modal()에 있는 게 아니기 때문이다.
자바스크립트에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없다.
하지만 컴포넌트 2개가 부모/자식 관계인 경우에는 가능하다.
(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부른다.)
부모 컴포넌트의 state를 자식 컴포넌트로 전송해 줄 수 있고, 그러면 자식 컴포넌트도 state 사용이 가능하다.
state를 전송할 때에는 props라는 문법을 사용한다.
props
- 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값
props로 부모 컴포넌트 → 자식 컴포넌트로 state 전송하는 법
1. 자식 컴포넌트 사용하는 곳에 <자식컴포넌트 작명={state 이름} />
2. 자식 컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용
실습을 통해서 이해해 보자.
글 제목 post 라는 부모 컴포넌트의 state를 자식 컴포넌트 <Modal>에 전송해 보자.
1. 자식 컴포넌트 사용하는 곳에 <자식컴포넌트 작명={state 이름} />
Modal이라는 자식 컴포넌트에 post state를 글제목으로 작명했다.
(보통 오른쪽 이름과 같이 작명하지만 지금은 구분하기 쉽게 다르게 작명함)
2. 자식 컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용
Modal function에서 props를 파라미터로 등록하고 제목 자리에 props.글제목을 사용했다.
우선 첫 글 제목만 나타나게 하기 위해 props.글제목[0]으로 작성했다.
실행 화면
(참고)
1. props는 <Modal 글제목={post} 좋아요={like} /> 이런 식으로 10개, 100개, ... 무한히 전송 가능하다.
2. 꼭 state만 전송할 수 있는 건 아니다.
<Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고,
<Modal 글제목="영화 추천"> 일반 문자 전송은 중괄호 없이 가능하다.
3. props 전송은 부모 → 자식만 가능하다. 자식 → 부모, 자식 → 자식은 불가능하다.
props 응용
props는 함수 파라미터 문법이랑 똑같다.
함수 하나로 다양한 기능을 사용하기 위해서 파라미터 함수를 사용하는데, props도 파라미터랑 똑같은 문법이다.
예로 props를 이용해서 여러 색의 배경을 가진 모달창을 만들 수 있다.
가장 쉬운 방법은 이렇게 function Modal2(){}, function Modal3(){}, ... 컴포넌트를 또 만드는 것이다.
하지만 내용이 똑같고 배경색만 다르면 굳이 같은 함수를 여러개 만들 필요가 없다.
이렇게 props.color로 자리를 만들고 컴포넌트를 사용할 때 <Modal color={'skyblue'} /> , <Modal color={'yellow'} /> 사용하면 된다. 그래서 비슷한 컴포넌트를 또 만들 필요가 없는 것이다.
Q1.모달창 안에 글수정 버튼 만들고 클릭하면 첫 글 제목이 '공포 영화 추천'으로 바뀌는 기능을 만들어 보자.
Q2.클릭한 글 제목이 모달창 안에 뜨도록 해 보자.
0번 글 누르면 0번 글 제목이 모달창 안에, 1번 글 누르면 1번 글 제목이 모달창 안에..
동적인 UI 만드는 순서를 생각해 보자.
1. html, css로 UI 디자인
이미 레이아웃이 만들어져 있다.
2. UI의 현재 상태를 state로 저장
function App(){}안에 state를 하나 만든다.
모달창 안의 글 제목은 0번글 보이기, 1번글 보이기, ... 이런 상태이기 때문에 간단하게 숫자로 표현했다.
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성
만약 title이 0이면 props.post[0] 보이기, title이 1이면 props.post[1] 보이기 이렇게 코드를 작성하면 된다.
조건문을 사용해도 되지만 위의 사진처럼 작성해도 된다.
그러면 title의 값에 따라 props.post[0], props.post[1], ..이 보일 것이다.
그런데 실행해 보면 title이 정의되지 않았다는 에러가 뜬다.
왜?
title state는 부모가 가진 state라서 자식이 사용하고 싶으면 props로 전송해야 한다.
이렇게 수정해 주자.
이제 글을 클릭할 때 글 제목이 나타날 수 있도록 onClick을 구현해 주기만 하면 된다.
0번 글 클릭하면 title이라는 스위치를 0으로,
1번 글 클릭하면 title이라는 스위치를 1로
2번 글 클릭하면 title이라는 스위치를 2로 바꿔 주면 된다.
title이라는 state를 변경해 줘야 하므로 state 변경함수 setTitle()을 사용한다.
map() 안에서 i는 반복문이 돌 때마다 0,1,2,... 이렇게 증가하는 정수이다.
그래서 setTitle(i)는 첫번째 글 누르면 setTitle(0)실행, 두번째 글 누르면 setTitle(1), 세번째 글 누르면 setTitle(2)가 실행된다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
