[React] JSX 문법의 몇 가지 규칙

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면, 

⚠️반드시⚠️

부모 요소 하나로 감싸야 한다.

아래 첨부한 사진 처럼 코드를 작성해 보자.

src/App.js

SyntaxError: /Users/사용자/Desktop/Nest_ex/hello-react/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (6:6)

 

그럼 위와 같은 에러 메시지를 볼 수 있다.

요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생 했다.

이런 오류는 다음과 같이 해결 할 수 있다.

 

이건 이해를 돕기 위해 극단적인 예시를 들어 만든 태그이다.

절대 이렇게 하면 안 된다 !🙅

 

아무튼 이렇게 감싸주면 이제 해당 에러는 해결 할 수 있다.

 

그렇다면, 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 할까?

그것은 바로, Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

 

2.인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 거시 아니라 🙅, 객체 형태로 넣어 주어야 한다.

스타일 이름 중에서 background-color 처럼 ' - ' 문자가 포함되는 이름이 있는데, 이러한 이름은 ' - ' 이름을 없애고 카멜표기법(camelCase)으로 작성해야 한다.

따라서 background-color는 backgroundColor로 작성해야 한다.

 

3.class대신 className

HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class 라는 속성을 설정한다.

하지만, JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

src/App.css

src/App.js

아래 첨부한 사진은 결과물 

결과물

 

4.꼭 닫아야 하는 태그

HTML를 작성할때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 한다.

예를 들면, input HTML요소는 <input></input>이라 입력 하지 않고 <input>이라고만 입력해도 작동이 된다.

하지만, 

아래와 같이 작성을 하면 에러가 난다.

그러므로, input태그를 작성 했다 하더라도 닫아 줘야 한다.

아래 처럼 작성 해야 에러가 나지 않는다.

 

 

 

 

❗️해당 내용은, '리액트를 다루는 기술'의 책 내용을 정리 한 내용입니다.

해당 React게시글에 특별한 코멘트를 달지 않았다면, 해당 책의 내용을 참고 하여 작성 했다고 생각 하시면 됩니다.

정확한 내용은 책을 구매 하셔서 보시면 됩니다.