Conditional-rendering, 리액트 조건부 렌더링

동적인 화면을 만들기 위해 리액트에서 조건부 렌더링을 사용할 수 있습니다.

 

동일한페이지에 하나의 글자나 효과만을 변경하기 위해서 새로운 페이지를 만드는 것은 비효율적입니다.

 

이럴때 조건부 렌더링을 사용할 수 있습니다.

 

아래는 컨테이너/프리젠테이셔널 패턴으로 폴더 구조를 체계화 하였을때,

조건을 설정하여 글자나 페이지의 일부를 변경하는 코드입니다.

 

두개의 index 모두 PortFolioCreateBoards 태그를 불러오고 있지만, 노란색은 isEdit={false}, 초록색은 isEdit={true} 입니다.

 

컨테이너/프리젠테이셔널 패턴의 값을 넘겨주기 위해 props를 사용하였고, 삼항 연산자를 사용하여 onClick 메서드와 LastBtn(버튼속성) 텍스트를 변경하게 하였습니다. 

 

isEdit가 false 일경우 "등록하기" 버튼과, onClickContents 함수가 실행됩니다.

isEdit가 true 일경우 "수정하기" 버튼과, onClickUpdateBoard 함수가 실행됩니다.

 

이렇게 조건부 렌더링을 활용하여 하나의 페이지에서 여러가지 페이지 및 동작을 실행시킬 수 있습니다.