포트폴리오를 제작하면서 게시글 작성 UI와 수정 UI를 같은 컴포넌트로 사용하려고 하는데 작성부분에서는 등록이라는 버튼과 타이틀이 필요하고 수정부분에서는 수정이라는 버튼과 타이틀이 필요한 문제가 생겼다.
어떻게 해결할까 생각을 하다 Conditional-rendering(조건부 렌더링)을 배워 해결할 수 있었다!!

Conditional-rendering

Conditinal-rendering은 조건부 렌더링이라고 불린다.
쉽게 말해 상태에 따라 앱의 동작을 변경하는 것을 말하는데 예를 들어
로그인을 하지 않았으면 로그인 버튼이 나와야하고 로그인을 하였으면 로그아웃 버튼이 나와야 할때 조건부 렌더링을 사용할 수 있다.
조건부 렌더링은 다양한 방법으로 사용할수있는데 한번 알아보자

1. 조건문을 사용

Javascript에서와 같이 if와 같은 조건문을 사용하여 특정 조건이 충족될 때 필요한 요소를 생성할 수 있다.

ex) 상태에 따라 등록버튼과 수정버튼을 보여주는 예

export default function BoardWrite(props) {
	return (
    	<>
        	<button>{ props.isEdit ? "수정하기" : "등록하기" }<button>
        </>
    )
}

이처럼 isEdit 상태를 props를 통하여 받아 삼항 연산자를 이용하여
상태가 true이면 수정하기 글자를 반대로 false이면 등록하기 글자를 렌더링 하게끔 해주었다

2. 논리 연산자를 사용

논리 연산자(&&)도 사용하여 요소를 조건부로 렌더링할 수 있다

export default function BoardPage(props) {
	return (
    	<>
        	{ props.boardList.length > 0 && <p>현재 { props.boardList.length } 개의 리스트가 있습니다</p> }
        </>
    )
}

이처럼 boardList의 길이가 0 이상일 경우에만 조건부로 렌더링을 해줄수있다