react로 toggle형 modal과 조건부 렌더링

TOC

1. 조건부 렌더링

1. 조건부 렌더링

이전에 구현했던 modal은 component 내부에서 HTML엘리먼트를 생성하고 엘리먼트의 스타일을 켜고 끄는 것을 통해 modal창이 보였다 사라졌다를 반복했었다.

이것도 충분히 잘 동작한다 하지만 component자체를 modal창 처럼 켰다 끄는 것은 이전의 방법이 통용되지 않았다. (찾지 못한 것일지도 모른다.)

새로운 방법으로 조건부 렌더링을 도입하기로 했다. 조건이 갖추어지면 react는 해당 component를 렌더링 해준다는 단순하고도 지금 하려는 일에 딱 들어맞는 내용이다.

예상해보기

A 버튼을 눌렀을 때 B component가 나타나야 한다.

A 버튼을 눌렀을 때 boolean state 값을 false에서 true로 변경하고
B component는 state값을 props로 입력을 받는다.

B component는

...
return(
<>
 {props.prop ? (<div>hi!</div>) : null}
</>
)

위와 같은 방식으로 부모 component로 부터 받은 prop값이 참이면 render값을 넘겨주어 렌더링이 진행되고

거짓인 경우 null값을 넘겨주어 component가 보이지 않게 되는 형태로 만들어주면 된다.

만일 error페이지를 만들어야 하는 경우 특정 조건이 모두 갖추어지면 null 대신 error페이지를 넣어주면 그만인 것이다.

총총

위 개념은 원래 니꼬샘의 강의 영상을 보고 배웠던 것인데 완전히 잊고 있었다.