-
리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다.
⑤ undefined를 렌더링하지 않기
이걸 실행하면 Nothing was returned from render. This usually means a return statement is
missing. Or, to render nothing, return null 이런 오류가 발생한다.오류를 해석해 보면, render에서 아무것도 반환되지 않았으며 일반적으로 return문을 잃어버렸거나, 또는 아무것도 렌더링 하지 않으려면 null을 반환해야 한다. 라는 뜻이다.
이 오류를 수정해보자!
오류를 수정하면 다음과 같은 결과가 출력된다.
어떤 값이 undefined일 수 있다면 OR 연산자를 사용해 해당 값이 undefined일 때 사용 할 값을 지정할 수 있으면 간단하게 오류를 방지할 수 있다.
⑤-① JSX 내부에서 undefined를 렌더링하기
보여주고 싶은 문구가 있을 땐
⑥ 인라인 스타일링
- 리액트에서 DOM요소에 스타일을 적용할 때는 객체 형태로 넣어야 한다.
- background-color처럼 - 문자를 없애고 카멜 표기법으로 작성해야 한다.
background-color은 backgroundColor로 작성
⑥-① 객체를 미리 선언하지 않고 style 값 지정
⑦ class 대신 className
-JSX에서는 class가 아닌 className으로 설정한다.
App.css 
App.js 
App.js 파일의 8번째 줄을 보면 className로 값을 지정해 준다.
⑧ 꼭 닫아야 하는 태그
이 코드를 보면 Parsing error: Unterminated JSX contents 이런 오류가 발생했다.
이 오류의 뜻은 종료되지 않은 JSX 컨텐츠라는 뜻이다. input 태그를 닫아 주지 않아 발생했다.
이 코드를 수정해보자!
11번째 줄 input 태그를 보면 태그 사이에 내용이 들어가지 않았는데 선언과 동시에 닫았다.
이런 태그를 self-closing태그라고 부른다.
⑨ 주석
- JSX 내부에서 주석을 작성할 때는 {/* ... */}와 같은 형식으로 작성한다.