감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다.
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
✔ 오류 케이스
✔ 정상 코드 1 (< div > < /div >)
✔ 정상 코드2 (< Fragment >< /Fragment >)
✔ 정상 코드3 ( <> < / >)
✔ 결과
자바스크립트 표현
JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.
✔ 결과
If문 대신 조건부 연산자(삼항 연산자)
JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자를 사용하면 된다.
✔ {} 안에 조건부 연산자
✔ 외부에서
✔ 결과
AND 연산자(&&)를 사용한 조건부 렌더링
특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 할때도 조건부 연산자를 사용하여 구현 할 수 있지만 && 연산자를 사용해 조건부 렌더링을 할 수 있다.
✔ 조건부 연산자
✔ && 연산자
리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문에 && 연산자로 조건부 렌더링을 할 수 있다.
✔ 결과
undefined를 렌더링하지 않기
리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다. 하지만 어떤 값이 undefined일 수도 있다면 OR(||)연산자를 사용한다.
✔ OR(||)연산자
✔ 결과
반면 JSX 내부에서는 undefined를 렌더링 하는 것은 괜찮다.
✔ 결과
✔ 값이 undefined 일 때 보여주고 싶은 문구가 있다면
✔ 결과
인라인 스타일링
리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 한다. 또, 카멜 표기법으로 작성해야 한다.(font-size => fontSize)
✔ style 객체 미리 선언
✔ 미리 선언하지 않고 style 값 지정
✔ 결과
class 대신 className
class는 이미 자바스크립트에 키워드로 예약이 되어 있기 때문에 JSX에서는 class가 아닌 className으로 설정해야 한다.
✔ APP.css
✔ APP.js
✔ 결과
주석
JSX 내부에서 주석을 작성할 때는 {/ ... /} 형식을 사용한다. 시작태그를 여러줄로 작성할 때는 내부에서 // 형식으로 주석을 작성할 수 있다.
✔ 결과
