[React Basic] JSX 활용법

게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive

⛳ if 문 대신 조건부 연산자

📢 JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다.

하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 { } 안에 조건부 연산자를 사용한다.

조건부 연산자 = 삼항 연산자

function App(){
	const name = '리액트';
  return(
  	<div>
    {name = '리액트' ? (
     <h1>리액트입니다.</h1>
     ) : (<h1>리액트가 아닙니다.</h1>
    )}
	</div>
  )
}

---

⛳ &&를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여주고 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있다.

즉, name이 '리액트' 일때만 보여주고 '리액트'가 아니면 아무것도 보여주지 않을 때

function App(){
	const name = '리액트';
  return(
  	<div>
    	{name === '앵귤러' && <h1>앵귤러입니다.</h1>}
    </div>
  )
}

• 실제 name의 값은 '리액트'이기 때문에 화면에는 아무것도 나타나지 않는다.

• &&을 사용하면 false일때는 아무것도 나타내지 않는다.

• 모달창에서 모달의 state가 true일 때만 모달을 여는 코드에서 많이 사용했다.

🚨 예외!!!!
falsy한 값인 0은 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>
//0

//true는 아니니깐 "내용"이 출력되는 것은 아님. 변수에 담긴 값이 출력 됨

---

⛳ undefined 렌더링 하지 않기 || 연산자 사용

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안된다. 오류가 발생한다.

function App(){
	const name = undefined;
  	return name;
}

//Nothing was returned from render ......

어떤 값이 undefined일 수도 있다면 || 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있어 오류 방지

function App(){
	const name = undefined'
  	return name || '값이 undefined입니다.';
}

🚨 JSX 내부에서 undefined를 렌더링 하는 것은 가능하다.
name 값이 undefined 일때 보여주고 싶은 문구가 있다면..

function App(){
	const name = undefined;
  	return <div>{name || '리액트'}</div>;
}
//리액트

---

⛳ 인라인 스타일링

function App(){
	return(
    	<div
      		style={{backgroundColor : 'red', fontSize: '15'}}
      	>안녕
		</div>
    )
}

---

⛳ class 대신 className

⛳ 빈 태그는 self-closing으로 닫아주기