React에서 {} 중괄호의 사용

정혜인·2023년 2월 3일

react

목록 보기

4/14

기본기부터 다시 다지자는 마음으로 react 공부를 하던 중, {}와 ()의 사용 위치가 어떻게 되는 것인지 알고 싶어졌다.
프로젝트를 할 때에는 대충 구글링을 하거나 느낌상 여기에는 {}가 사용된 것 같다 싶으면 넣고, 오류가 발생하면 넣어보는 식으로 진행했는데, 이는 나의 실력 발전에 전혀 도움이 되지 않는다는 것을 느끼고 기본부터 시작해보기로 했다.

JSX

가장 먼저 JSX 문법에 대해 알고 있어야하는데,

JSX는 JS에 XML을 추가한 확장 문법이다. (공식적인 JS 문법은 아님)
react로 개발할 때 편의를 위해 만들어졌다.

예를 들어, 아래와 같은 코드 (react에서 JSX로 작성됨)

function App(){
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

를 JS만의 문법으로 바꾸면, 다음과 같다.

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}

예시를 들어 살펴보니 왜 JSX를 사용하는지 한번에 이해가 된다.

브라우저에서 사용하기 전, bable 컴파일러를 통해 XML -> JS 형태로 변환된다.
위의 JSX 예시 코드에서 JS 예시 코드로 변환될 때 babel 컴파일러가 사용되는 것이다.

▶︎ 결국 react에서는 JSX를 JS로 변환후 사용하기 때문에, JS 문법으로 사용하기 위해서는 따로 {}라는 코팅(?) 작업을 거처야 하는 것이다.

react {}

❓ props, state, 변수 사용

        return (
            <div>
                <p>안녕하세요, 제 이름은 {this.props.name} 입니다.</p>
                <p>저는 {this.props.age}살 입니다.</p>
                <p>숫자 : {this.state.number}</p>

위의 예시처럼 react에서 중괄호{} 는 props나 state, 혹은 JS 변수를 불러낼 때 사용된다.
(props와 state 모두 JS 객체이기 때문)

❓ 함수 사용

                <button onClick={() => {
                    this.setState({
                        number: this.state.number + 1}
                    )
                }}>숫자 더하기</button>

{tags.map((tag, index) => {
            return (
              <div key={index} className="card__tags--tag">
                {tag}
              </div>
            );
          })}

위의 두가지 예시처럼 함수 사용에서도 중괄호 {}를 사용할 수 있다.
(onClick, map, setState함수 모두 JS 함수이기 때문)

❓ import, export 사용

이 경우는 위의 두 경우와 조금은 다른데, export default이냐, export이냐에 따라 구분할 수 있다.

import Component1, {Component2, Component3} from "./MyComponent"

이런 식으로 사용될 때가 있는데, 어떤 때에 Component1이고, {Component2}인지 알아보자.

export default function Component1() {
  return (
    <div>
      <h1>Component1</h1>
    </div>
  );
}

export function Component2() {
  return (
    <div>
      <h1>Component2</h1>
    </div>
  );
}

export function Component3() {
  return (
    <div>
      <h1>Component3</h1>
    </div>
  );
}