[React] JSX문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 하나로 감싸야 된다.

function App(){
  return(
    <div>
    	<h1>hello</h1>
    	<h1>react</h1>
    </div>
    )
}
export default App;

위의 코드를 보면 <div> 라는 부모 태그안에 두 개의 <h1> 태그가 위치한 것을 볼 수가 있다. 여러 태그를 포함시키고 싶을때는 하나의 부모 태그안에 여러 태그를 넣으면 된다.
무조건 <div>를 써야하는것은 아니며 <Fragment>, <> 태그를 사용해도 된다.

2. 자바스크립트 표현

자바스크립트 표현식을 작성하려면 {}로 감싸면 된다.

function App(){
  const name = '리액트';
  return(
    <div>
    	<h1>hello {name}</h1>
    </div>
    )
}
export default App;

위와 같이 코드를 작성하고 실행시키면 hello 리액트가 출력이 된다.

3. 조건부 연산자

JSX에서는 조건문으로 if문을 사용할 수 없고 삼항연산자를 사용하여야 한다.
삼항연산자는 {조건 ? 참일때 : 거짓일때} 와 같이 사용하면 된다

function App(){
  const name='리액트';
  return(
    <div>
    	{name === '리액트' ? 
         	(<h1>리액트</h1>) : 
         	(<h1>리액트가 아님</h1>) 
        }
    </div>
    )
}
export default App;

4. 조건부 렌더링

어떤 조건에 만족할 때는 보여주고 만족하지 않을때는 아무것도 보여주고 싶지 않을때 AND연산자(&&)를 이용하여 조건부 렌더링을 할 수가 있다.

function App(){
  return(
    <div>
    	{ 조건 && <h1>react</h1> }
    </div>
    )
}
export default App;

위의 코드에서 조건이 참일때 react를 보여주고 거짓일때는 아무것도 보여주지 않는다. 하지만 주의해야할 점은 falsy한 값인 0은 예외적으로 화면에 나타난다.

const number = 0;
return number && <h1>foo</h1>

이렇게 작성된 코드에서는 0을 화면에 보여준다.

5. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 오류를 발생시킨다. 이럴때 OR(||) 연산자를 사용하여 간단하게 오류를 방지할 수 있다.

function App(){
  const name = undefined;
  return name || 'undefined 입니다.';
  // JSX - return <div>{name}</div> 
}
export default App;

위와 같이 작성하면 오류가 발생되지 않으며 JSX 내부에서 렌더링 하는것은 괜찮다.

6. 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 객체 형태로 넣어주어야 한다. 그리고 스타일 이름 중 background-color 와 같이 -문자가 포함되어 있는 이름은 backgroundColor와 같이 카멜 표기법으로 작성해야 한다.

const style = {
  backgroundColor: 'black',
  color: 'white',
  fontSize: 24,
};
return <div style={style}>인라인 스타일링</div>

객체를 미리 선언하고 지정해 주었지만 선언하지 않고 바로 style의 값으로 지정해도 된다.

7. 꼭 닫아야 하는 태그

html에서는 <input> , <br> 과 같이 닫지 않아도 동작하지만 JSX에서는 태그를 닫지 않으면 오류가 발생하기 때문에 무조건 닫아주어야 한다.