REACT. JSX문법 2/3

개요

기초를 단단히 다니자

리액트를 사용할 때 사용하는 기본적인 코드를 이해해보자

 

문법4 AND 연산자(&&)를 사용한 조건부 렌더링

삼항연산자를 사용해야 할 것을 &&으로 표현할 수 있다

 

먼저 삼항연산자를 알아보자

return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null }</div>;

&&을 알아보자

return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;

 

문법5 undefined를 렌더링하지 않기

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

왜냐면 오류를 발생시키기 때문이다

 

그래서, OR(||) 연산자를 사용해서 해당 값이 undefined일 때를 사용할 값을 지정할 수 있다

const name = undefined;
return name || '값이 undefined입니다.';

const name = undefined;
return <div>{name}</div>;

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

 

문법6 인라인 스타일링

스타일을 적용할 때에는 문자열 형태로 넣는 것이 아니다

객체 형태로 넣어주어야 한다

 

아래는 잘못된 방법이다.

<div style="color: blue">안녕하세요</div>

 

아래와 같은 방식으로 해주어야 한다

<div style={{color: blue}}>안녕하세요</div>

 

혹은 아래와 같은 방법도 가능하다

const style = {color: blue}
<div style={style}>안녕하세요</div>

아맞다 

그리고 카멜방식을 써줘야한다

background-color -> backgroundColor

font-size -> fontSize

이런식으로!

느낀 점

리액트가 명확해지는 기분이다