[React] 모달창 만들기

각 글의 타이틀을 클릭하면 모달창이 뜨고 다시 클릭하면 모달창이 사라지는 것을 구현해 보았다.

별로 어려운 로직은 아닌데 리액트로 하려니 괜~히 더 헷갈렸다.

 

각각의 글들은 ListItem이라는 컴포넌트에 구현되어 있다.

1. modal의 상태초기값은 false로 설정을 한다.

2. 모달이 생길 위치에서 <div> 태그로 감싸고 1에서 주었던 값에 따라 <Modal /> 컴포넌트 표시 여부를 결정한다.

3. 글 제목이 들어있는 <span> 태그에 onClick 이벤트 발생 시 

modal의 상태값이 false라면 true를 아니라면 false를 반환시켜서

클릭 시 modal의 상태 값에 따라 2번에서 모달창을 동작시킨다.