2022.06.02 - React / JSX, 바벨, Hook, component종류와 생성

1. JSX 란?

문자도, HTML 도 아닌 자바스크립트 확장 문법이다. 

JSX문법을 사용하기위해서는 바벨(babel)이 필요함. 

 

2. 바벨(babel) 이란?

자바스크립트 컴파일러이다.

컴파일러는 언어 해석기로, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램을 뜻한다. 

 

3. Hook 이란? Hooks는 리액트 v16.8 에 새로 도입된 기능이다.

함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 

 

- 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 

- 랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. 

 

굳이 잘 쓰고있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야하는 이유?

클래스는 코드의 재사용성과 코드 구성을 어렵게 만든다.

-> this의 사용이나 이벤트핸들러의 등록 등 기본적인 JS 문법을 알아야 다룰 수 있기 때문, 

 

4. Component?

컴포넌트란 앱을 이루는 최소한의 단위를 뜻한다.

props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 

- props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 

(리액트 컴포넌트에 넣어주는 데이터 객체)

어떠한 값을 컴포넌트에 전달해줘야 할 때 사용하며, 할당된 후 컴포넌트 내부에서 값을 변경할 수 있다. 

- state 는 컴포넌트 내부에서 선언하며, 내부에서 값을 변경할 수 있다. 동적인 데이터를 다룰땐 state를 사용한다. 

리액트에서 정의하는 컴포넌트 종류에는 크게 클래스형 컴포넌트, 함수형 컴포넌트가 있다. 

 

- class component  (클래스형 컴포넌트)

 컴포넌트 구성요소, 리액트 생명주기를 모두 포함하고 있다. 

 주로 함수형 컴포넌트를 사용하지만 프로퍼티,  state,  생명주기 함수가 필요한 구조의 컴포넌트를 만들때 사용한다. 

// 정의
      class ClassComponent extends React.Component {
        render() {
          return <div>Hello</div>;
        }
      }

      // 사용
      ReactDOM.render(<ClassComponent />, document.querySelector("#root"));

 

-  function component (함수형 컴포넌트)

데이터를 가진 하나의 props객체 인자를 받은 후 React 엘리먼트를 반환한다. 

// function 정의1
      function FunctionComponent() {
        return <div>Hello</div>;
      }

      // function 정의2
      const FunctionComponent = () => <div>Hello arrow</div>;
      // 사용
      ReactDOM.render(<FunctionComponent />, document.querySelector("#root"));

 

- component 생성

    React.createElement(
        type, // 첫번째 인자는 타입!! 태그이름 문자열 | 리액트 컴포넌트 (그 자체를 넣을 수 있음) | React.Fragment
        [props], // 두번째 인자는 props! 리액트 컴포넌트에 넣어주는 데이터 객체
        [ ...children] //세번째인자는 여러개 가능, 자식으로 넣어주는 요소들이 들어감
      )

 

1. 태그 이름 문자열 type 사용해보기

  ReactDOM.render(
        React.createElement("h1", null, `type이 "태그 이름 문자열" 입니다.`),
        document.querySelector("#root")
      );

==결과==

 

2. 리액트 컴포넌트 type 사용해보기

  const Component = () => {
        return React.createElement("p", null, `type이 "React 컴포넌트입니다."`);
      };

      ReactDOM.render(
        React.createElement(Component, null, null),
        document.querySelector("#root")
      );

==결과==

 

 

3. React.Fragment -> div 안에 다른태그 생성없이 표현되어있음.
 -> 태그를 생성해야만 하위내용을 생성할 수 있었으나 Fragment 사용하면 태그 없이도 표현가능.

      ReactDOM.render(
        React.createElement(
          React.Fragment,
          null,
          `type이 "React Fragment" 입니다."`
        ),
        document.querySelector("#root")
      );

==결과==