조건부 렌더링 :
React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것입니다.

if나 조건부 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는데 사용. 그러면 React는 현재 상태에 맞게 UI를 업데이트 해준다.

function Greeting(props) { 
const isLoggedIn = props.isLoggedIn; 
if (isLoggedIn) { 
	return <UserGreeting />; 
} else { 
	return <GeustGreeting />; } }

if 문 조건에 따라 UserGreeting 컴포넌트를 렌더링할지 GuestGreeting 컴포넌트를 렌더링할지 결정한다.

요소 변수

요소를 담기 위해 변수를 사용할 수 있습니다. 이렇게 하면 컴포넌트의 일부를 조건부로 렌더링하는 데 도움이 되며 나머지 출력은 변경되지 않습니다.

게시판 작성에 제목과 비밀번호 타이틀 내용이 없으면 빨간색 글씨가 나타낸다.

위 컴포넌트는 현재 상태에 따라 에러표시를 해줄지 말지 결정한다.
그리고 자식에게도 넘겨줘야 한다.
현재 폴더 구조는 container/presenter 패턴 이니 이저 양해바란다.

조건부 연산자를 사용한 인라인 If-Else (3항연산자)

인라인으로 요소를 조건부 렌더링하는 다른 방법은 자바스크립트의 조건부 연산자인 condition ? true : false 를 사용하는 것입니다.
아래 예제에서, 작은 텍스트 블록을 조건부로 렌더링합니다.

내용은 props 안에 isActive라는 녀석으로 버튼의 색갈을 조절하는건데
컨테이너에서 필수조건에 데이터가 있을시 true값으로 지정해줬고 기본은 false로 맞춰줬다.
위코드를 보면 알수 있듯이 isActive가 true(필수값들이 다있음)면 노랑색 없으면 gray 로 표기 하고 있다.

옵셔널체이닝

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

이제 옵셔널 체이닝을 사용해 data.fetchBoard.number 안전하게 접근할수 있다.
data?.fetchBoard.number 주소를 읽으면 아래와 같이 data 객체가 존재하지 않더라도 에러가 발생하지 않는다.

위 예시를 통해 우리는 ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있다.

참고로 위 예시에서 사용된 user?.는 user가 null이나 undefined인 경우만 처리할 수 있다.

user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 data.fetchBoard 프로퍼티는 있어야 한다. 그렇지 않으면 data?.fetchBoard.number 두 번째 점 연산자에서 에러가 발생한다.