react 기초(4) -props

props 사용법

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면

그냥 쓰면 안되고 props로 전송해서 써야합니다. 

색도 변경가능!

만약 다른색 모달창이 필요하면 function 을 여러개 만들어서 각각 배경색을 다르게 만들어도 되지만 내용이 똑같은데 배경색만 다르면 굳이 같은 함수를 여러개 만들 필요가 없다.

=>props.color 이런 식으로 구멍을 뚫어놓으면 이제 컴포넌트 사용할 때

<Modal color={'skyblue'} /> 이러면 하늘색 모달창이 생성됩니다. 

<Modal color={'orange'} /> 이러면 오렌지색 모달창이 생성됩니다.

그래서 비슷한 컴포넌트를 또 만들 필요가 없어지는 것입니다. 

 

 

pops 응용 - 글제목 눌렀을때 같은 글제목의 모달창이 뜨게 하기

 

동적인 UI만들기

 

1. html css로 미리 디자인

2. 현재 UI의 상태를 state로 만들어두고

3. state 종류에 따라서 UI가 어떻게 보일지 작성. 

 

나중에 필요할때 title 이라는 스위치(state)를 조작하면(0,1,2)로 바꿔주면 그에 맞는 모달창이 표시되게 하면되겠군

🎁만약에 title == 0이면 props.글제목[0] 보여주고

만약에 title == 1이면 props.글제목[1] 보여주세요 조건문으로 사용해도됨🎁

 

이렇게 코드를 짜면 된다!

 

클릭할 때 스위치만 바꿔주면 기능 구현 완료!

 

=>각각의 글제목을 누르면 setTitle(i) 해주세요 ~ 라고 코드를 짜보았습니다.

map 안에 i는 반복문이 돌 때 마다 0,1,2...이렇게 차례대로 증가하는 정수이기 때문입니다!