React 컴포넌트와 JSX 문법

시리즈

2024. 9. 6. PM 6:20:56

#jsx #react #리액트 #component #컴포넌트

React 컴포넌트 개요

React 컴포넌트는 여러분이 React로 UI 구현을 할 때 항상 접합니다. 우리는 컴포넌트를 이리 저리 조립해 웹 애플리케이션을 구현하죠. 그럼 컴포넌트가 뭐냐고요? 컴포넌트는 여러 요소를 조합한 단위입니다. 여러 요소란 다음과 같습니다.

버튼 컴포넌트

Logic
Style
UI Layout

상자 컴포넌트

이미지 컴포넌트

리스트 컴포넌트

Logic은 JavaScript로 작성합니다. Style은 CSS로 작성하고요. UI Layout은 JSX를 이용해 마크업하는데 이는 결국 HTML DOM이라고 할 수 있습니다.

React 컴포넌트 만드는 방법

React 컴포넌트는 크게 두 가지 방법으로 만듭니다. 클래스형과 함수식. 함수식 컴포넌트는 JavaScript 언어 측면에서 보면 함수입니다. 다음 예제 코드도 함수 이름이 App인 함수를 선언한 것일 뿐이예요. 그럼 React는 어떻게 JavaScript 함수를 컴포넌트로 인식하는 걸까요?

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

우선 함수가 반환하는 값이 JSX이거나 React Element이면 그 함수는 컴포넌트로 인식합니다. 앞선 예제 코드는 <div></div>라는 JSX를 반환하므로 React 컴포넌트입니다. 이게 기본이고요.

함수 이름이 대문자로 시작하면 컴포넌트로 간주합니다. 하지만 JSX나 React Element를 반환하지 않으면 컴포넌트로 인식되진 않지요.

이 두 가지를 종합하면, JavaScript 함수명이 대문자로 시작하면 React 컴포넌트라는 표현을 하는 것이고, JSX나 React Element를 반환하면 비로소 React 컴포넌트로 인식합니다.

컴포넌트 상태 관리

다음 코드엔 알아야 할 요소가 두 가지 있습니다. 훅(Hook)과 상태(State) 관리지요. 자세한 건 나중에 다루기로 하고, 여기에선 useState()라는 훅을 사용하는 방법만 알아보겠습니다.

  const [email, setEmail] = useState("")

useState() 함수를 실행하면 두 개 항목을 반환합니다. 첫 번째 항목은 상태(State)의 현재 값입니다. 두 번째 항목은 상태의 값을 갱신하는 함수입니다. useState() 함수에 전달하는 인자는 상태의 기본값으로 사용되고요.

React 컴포넌트와 JSX 문법

문법 1 : 시작 Element는 반드시 하나여야 한다.

각 컴포넌트가 반환하는 JSX Element는 하나여야 합니다.

function App() {
  return (
    <div>
	    첫 번째
    </div>
    <div>
	    두 번째
    </div>
  )
}

이 예제 코드는 두 개 Element가 두 개 노드로 구성된 것입니다. 오류가 발생하지요.

다음과 같이 모든 것을 감싸는 Element가 하나 있어야 하지요.

function App() {
  return (
    <div>
	   첫 번째
      <div>
	    두 번째
      </div>
    </div>
  )
}

JSX Element인 <div>는 HTML Element인 <div>으로 표현됩니다. 그렇다면 만약 JSX Element를 감싸는 시작 Element를 어떠한 HTML Element로 표현하지 않으려면 어떻게 해야 할까요? 그럴 땐 Fragment를 사용합니다.

function App() {
  return (
    <>
      <div>
	    첫 번째
      </div>
      <div>
	    두 번째
      </div>
    </>
  )
}

마치 빈 태그처럼 보이는 <>와 </>가 바로 Fragment입니다. 불필요하게 DOM 구조가 깊어지는 것을 방지하는 거죠. 다음과 같은 코드도 가끔 볼 수 있는데요.

function App() {
  return (
    <React.Fragment>
      <div>
	    첫 번째
      </div>
      <div>
	    두 번째
      </div>
    </React.Fragment>
  )
}

동일한 동작을 합니다. <React.Fragment>에 대한 줄인 표현이 <>인 것이죠.

문법 2 : React Element의 속성에 문자열 외 값 할당하기

문자열을 제외한 값을 컴포넌트에 전달하려면 {와 }를 사용합니다.

      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
}

이 코드를 보면 email을 값으로써 <input> Element의 value 속성에 할당하고 있습니다.

      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value="email"
        onChange={(e) => setEmail(e.target.value)}
      />
}

이와 같이 따옴표로 감싸면 email이라는 문자열이 할당되는 것입니다. 문자열 외 값을 사용할 때 {과 }를 사용하므로 숫자나 배열, 객체 뿐만 아니라 함수도 {과 }를 감쌉니다.

문법 3 : 조건부 렌더링

JSX 안에서는 if문을 사용할 수 없습니다. 하지만 조건에 따라 컴포넌트를 출력하거나 출력하지 않는 경우가 많습니다. 이런 조건부 렌더링은 if문을 쓰지 않고 처리합니다. 다시 App 컴포넌트 전체 코드를 보겠습니다.

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>
      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button>구독하기</button>

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
    </div>
  )
}

이 컴포넌트는 email 상태값이 있는 경우에 입력한 E-mail 주소 : {email}이 출력됩니다. 바로 && 표현식을 사용한 것입니다.

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}

&& 앞에는(왼쪽) 조건식을, 뒤에는(오른쪽) 렌더링할 JSX문을 기술합니다. 따라서 앞선 예제 코드는 email 값이 있는 경우에 && 뒤에 있는 JSX문이 출력되는 거지요. 주의해야 할 점은 조건식은 boolean 이어야 합니다. 즉, 명확하게 true이거나 false여야 하며, truthy나 falsy여서는 안 됩니다.

{0 && <p>출력되지 않아야 하는데?!</p>}

이렇게 falsy인 경우 숫자 0이 출력됩니다. 실제 예제를 보죠.

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      {0 && <p>출력되면 안 되는데 0이 출력됨</p>}
      <h1>푸딩캠프 뉴스레터</h1>
      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>

      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button>구독하기</button>

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
    </div>
  )
}

기존 컴포넌트에 {0 && <p>출력되면 안 되는데 0이 출력됨</p>}를 추가했습니다. 확인해보죠.

숫자 0이 위에 출력되었지요? 그러므로 !!value이나 value > 0과 같이 명확하게 boolean이 평가에 사용되도록 해야 합니다.

삼항연산도 가능합니다.

      {email ? <p>입력했당</p> : <p>입력 안 했당</p>}

이 경우엔 참이든 거짓이든 React Element가 반환되므로 조건식이 반드시 boolean으로 평가될 필요는 없습니다. 그래서 Truthy/False 평가를 할 수 있지요.

문법 4 : 괄호로 JSX문 묶어주고

프로그래밍 언어들은 대체로 가독성을 이유로 구문을 개행할 때 괄호로 묶어줍니다. JSX 내 코드는 JavaScript이므로 당연하다면 당연하게 괄호((과 ))로 묶어줄 수 있습니다. 괄호로 묶지 않은 컴포넌트 코드를 먼저 볼게요.

function App() {
  const [email, setEmail] = useState("")
  return <div>
    <h1>푸딩캠프 뉴스레터</h1>
  </div>
}

그런데 실제로 우리는 다음과 같이 작성했습니다.

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>
    </div>
  )
}

이 문법은 컴포넌트 안에서 JavaScript와 JSX가 복잡하게 얽히는 경우에 종종 쓰입니다.

문법 5 : boolean 값을 사용하는 속성

HTML Element의 속성 중에는 boolean 성격을 띠는 게 있습니다. 예를 들면, input 태그의 required 속성이지요.

<input required>

이 required 속성을 명시하면 required 속성이 설정된 것이고 명시 안 하면 설정하지 않은 것이죠. JSX 에서도 같은 방식으로 설정합니다.

<input required />

또는 명시적으로 true를 전달해도 됩니다.

<input required={true} />

문자열이 아닌 값이므로 {과 }로 감싼 것에 유의하세요.

문법 6 : 항목 값이 여러 개인 경우

HTML 태그의 속성 중엔 값을 여러 개 사용할 수 있는 게 있습니다. 대표적인 것이 style 속성이죠.

<div style="font-size: 1rem; font-weight: bold;">CSS Styles</div>

JSX도 같은 방식으로 가능합니다. 만약 이런 속성 값이 조건에 따라 동적으로 바뀐다면 어떻게 하면 좋을까요? 가장 직관적이고 편한 방법은 객체를 사용하는 것입니다.

<div style={{ fontSize: '1rem', fontWeight: 'bold' }}>CSS Styles</div>

중괄호({와 })가 두 개 겹쳐져 있는 걸 주의하세요. 맨 바깥쪽 중괄호는 문자열 외 값을 사용하기 위해서, 안쪽 중괄호는 JavaScript의 Plain Object를 정의하는 데 사용한 거예요.

문법 7 : 주석

JSX에서 주석은 간단합니다.

{/* 주석으로 처리될 내용 */}

{/*과 */}로 감싸는 것이지요.

function App() {
  const [email, setEmail] = useState("")
  return (
    <div>
      <h1>푸딩캠프 뉴스레터</h1>
      {/* 
      <p>
        <a href="https://pudding.camp/~/newsletter">푸딩캠프의 소식</a>을 이메일로 받아보세요.
      </p>
      */}

      <input
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className={['email-input', email ? 'email-input--entered' : '']}
      />
      <button>구독하기</button>

      {!!email && <p>입력한 E-mail 주소 : {email}</p>}
    </div>
  )
}

어느 부분을 주석 처리한 것인지 아시겠죠?

여기까지 진행한 커밋

우리가 실습하고 있는 컴포넌트는 사용자가 입력한 값을 useState() 훅으로 상태(State)를 제어하는 컴포넌트를 제어 컴포넌트(Controlled Component)라고 합니다. 이에 반해 React가 아닌 DOM에서 제어하고 React는 DOM의 값을 참조하는 방식을 비제어 컴포넌트(Uncontrolled Component)라고 합니다. 자세한 사항은 후에 다룹니다.

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.

이전 컨텐츠

다음 컨텐츠