{ }, ( ) 차이, feat return

@2023/12/11

안녕하세요 lika-7입니다

이번시간에는 react에서 { } (중괄호) 와 ( ) (소괄호) 소괄호의 차이에 대해서 설명하겠습니다.

{ } 중괄호

• JavaScript 표현식을 사용할 때 사용합ㄴ디ㅏ

• { } 안에 JavaScript 코드를 작성하며, 해당 코드는 평가 되고 결과가 JSX에 삽입됩니다.

• 변수, 함수, 호출, 산울 연산 등의 JavaScript 코드를 { } 안에 작성할 수 있습니다

  const myVar = 'Hello';
  const myElement = <p>{myVar}</p>;

( ) 소괄호

• JSX에서 여러 줄을 그룹화 하거나, JSX를 반환할 때 사용합니다

• { } 와 마찬가지로 JSX 내에서 JavaScript 표현식을 그룹화 할 때도 사용합니다

  const myElement = (
    <div>
      <p>Hello</p>
      <p>World</p>
    </div>
  );

• 또는 함수에서 JSX를 반환할 때

  const MyComponent = () => (
    <div>
      <p>Hello</p>
      <p>World</p>
    </div>
  );

• 단순히 값을 그룹화 하거나 반환하는 경우 ( )를 사용할 수 있습니다

return

• return은 함수가 값을 반환하라는 명령 입니다

• JSX를 사용하는 React 함수 컴포넌트에서 해당 컴포넌트가 어떤 JSX를 렌더링 해야 할지 결정하기 위해 return을 사용합니다
  • 컴포넌트 내에서 JSX를 반환할 때 return을 사용합니다

function MyComponent() {
  return (
    <div>
      <p>Hello, World!</p>
    </div>
  );
}

• 위의 코드에서 return 키워드는 해당 컴포넌트가 화면에 렌더링될 JSX를 정의하고 있음을 나타냅니다
  • return을 사용해 해당 컴포넌트가 어떤 JSX를 렌더링 할지 명시합니다