4기 카카오 프론트 전체 스터디 - 리액트 1주차 (JSX, Props, 컴포넌트 구조)

1주차: JSX, Props, 컴포넌트 구조

목표

토론 주제

JSX 문법과 HTML과의 차이 이해

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

위 문법이 jsx 문법이다. jsx는 javascript + xml을 합친 말이다.

<h1>About</h1>
<p>Hello there.<br />How do you do?</p>

위 문법은 HTML이다.

리액트는 무조건 "상위 태그"의 부모태그로 감싸있어야 한다. HTML은 뭐 그딴 거 없다.

또한, jsx는 자바스크립트 기능도 지원하기 때문에 HTML보다 더 상위의 문법(?)이라고 볼 수 있다.

Props를 통한 데이터 흐름 익히기

일단 공식 문서 링크는 다음과 같다.

컴포넌트에 props 전달하기 – React

The library for web and native user interfaces

ko.react.dev

props는 JSX 태그에 전달하는 정보라고 리액트는 정의한다.

이 props를 이용해 내가 원하는 정보를 마음대로 전달하고 공유 가능하다.

코드를 살펴보자. (링크 타면 코드 샌드박스에서 컨트롤 가능)

설명하자면 Avatar에 있는 이미지의 사이즈나 이름, Id 값 등이 props인 것이다.

이 값을 "동적"으로 바꾸고 컴포넌트에 전달이 가능한 것.

컴포넌트 분리 및 재사용 기본

리액트의 장점은 코드를 마치 레고처럼 분리하고 재사용할 수 있다는 것이다.

예를 들어..

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

MyButton이라는 함수가 존재한다. 이 함수는 버튼 하나를 가지는 심플한 함수이다. 이 함수를....

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

MyApp이라는 컴포넌트 "안"에 삽입이 가능하다. 일종의 재사용을 만든 것이다. 중복이 많은 코드는 그냥 컴포넌트화 하고 분리를 한 다음에 재사용하면 된다.

토론 주제

JSX는 자바스크립트인가 HTML인가?

나의 답은 "둘 다"이다.

이유: 동적인 기능을 가진 자바스크립트 (함수 등)을 쓸 수 있으며 그 안에 태그가 존재하기 때문이다.

처음 jsx를 입문하면 그 형태가 되게 신기하게 보인다.

관련글