Week01 리액트/Next.js 기초 3.1-3.4

3.1 리액트 입문

터미널에서 아래의 코드를 실행해 타입스크립트를 사용하는 최신 리액트 기본 앱을 만들 수 있다.

$ npx create-react-app@latest react-sample --template typescript

npx가 없다면 npm을 이용해 설치해 주고 npm이 없다면 node js를 설치해줘야 한다.

$ cd react-sample
$ npm run start

만들어진 react-sample 프로젝트로 작업 디렉토리 변경 후 서버를 실행해 준다.

서버가 실행될 때 동작하는 코드에 대해 자세히 알아보자.

 

사전지식) tsx, jsx는 return 값으로 html의 element를 준다. 그리고 return element를 export한다. 

const Hello = () => {
  return <div>Hello</div>;
};

export default Hello;

이런 식으로 작성해 다른 파일에서 import Hello from "fiile_path"를 해준다면 <Hello/>로 쉽게 사용이 가능하다.

index.html이 실행되면 index.tsx (typescript가 아닐 경우 index.js)와 연결된다. (자세한 설명은 https://stackoverflow.com/questions/41738421/how-react-js-index-js-file-contacting-index-html-for-id-references 참고)

 

index.tsx에서는 ReactDom.createRoot함수를 사용해 index.html에 있는 root id를 가진 element를 root로 지정한다. (react version 18 이상부터 적용되는 부분)

 

여기서 Root란? react는 root에서 시작해 내려가며 필요한 컴포넌트들에 대한 렌더링을 하며 업데이트를 한다. 따라서 index.html의 id=root인 div에서 계속해서 밑으로 발전시켜 나가고, 업데이트가 필요하다면 밑으로 탐색하며 업데이트를 수행해 준다.

 

이후 index.tsx에서는 App.tsx를 import 해 App이라는 component를 불러온다. 따라서 <App/>은 App.tsx에서 export 한 element를 출력하게 된다.

 

 

 

 

 

3.2 리액트에서의 컴포넌트

리액트에서 컴포넌트란 요소 (div, span 등 html의 작은 단위) 등을 조합한 것으로 형태와 작동을 설정한 UI의 부품 단위이다. 한 웹페이지의 헤더, 바디, 메뉴바 등 다양한 것이 될 수 있다.

 

컴포넌트가 존재하는 JSX 코드는 웹팩에 의해 JS 코드로 변화되면서 JS의 객체로 표현된다. 이렇게 변화된 JS 코드를 브라우저가 읽어서 실행하고 화면을 그린다. JS코드에서 브라우저에 표시된 내용을 바꿔 쓸 때는 DOM에 접근해야 하는데 리액트는 이때 가상 DOM을 구현하고 이전의 가상 DOM과 비교해 업데이트가 필요한 부분만 실제 DOM을 업데이트한다.

 

컴포넌트는 JSX코드에서 작성되므로 실제 코드의 변수, 유저의 입력 값들을 받아 html에 담아 리턴할 수 있고 이때 중괄호를 사용한다. 그리고 컴포넌트 이름은 반드시 대문자로 시작하는 카멜케이스로 작성해야 한다. 소문자는 인식되지 않는다.

import React from 'react'

const Name = () => {
	const name = "nerim";
    return(
    	<div>{name}</div>
    )
}

export default Name;

component를 사용할 때 상위 컴포넌트에서 가지고 있는 값을 하위 컴포넌트에 전달해줄 수 있다. 이를 props라고 한다.

예를 들어 input이 있는 container에서 출력만 하는 div component를 추가하고 싶다면 input의 값을 하위 div에게 전달해줘야 할 것이다. 이때 이렇게 작성할 수 있다.

//하위 컴포넌트
import React from 'react'

const Text = (props: {content: string}) => {
    //{}는 비구조화할당 문법 (ES6 참고)
    //content라는 변수에 props 중 변수 이름과 일치하는 것을 꺼내온다.
    //이 경우 const content = props.content;
    const { content } = props
    //{}는 html 안에 변수를 삽입하기 위한 중괄호
    return <div>{content}</div>
}

export default Text;

//상위 컴포넌트
import React from 'react'
import Text from './text'

const Message = () => {
	const userDefineContent = "hello world!";
    return(
    	<Text content={userDefineContent}/>
   	)
}

 

3.3 리액트에서의 타입

리액트에서는 타입 키워드를 사용해 본인이 만든 객체에 타입들을 지정해 줄 수 있다. 이를 지정함으로써 타입 관련 오류들을 정적으로 검사할 수 있다. (사실 이 부분은 타입스크립트 한정인지? 아직 잘 모르겠음)

위의 예시를 변형해 보자.

import React from 'react'

type TextProps = {
	content : string
}

const Text = (props: TextProps) => {
    const { content } = props
    return <div>{content}</div>
}

export default Text;

현재 예시 props의 attribute가 하나라 굳이 싶지만 웹 개발을 할 때에는 자식이 계속 많아지므로 이런 식으로 위에서 타입을 정의해 놓으면 간결하게 계속 사용할 수 있다.

 

3.4 Context

앞에서 Props를 사용해 부모에서 자식으로 데이터를 전달하는 방법을 알아봤는 데, 부모의 정보를 많은 자식들이 쓰길 원한다면 context를 사용할 수 있다. context를 사용하면 부모로부터 직접 전달받지 않아도 컴포넌트가 필요한 데이터를 사용할 수 있다. Context는 Provider와 Consumer 2개의 컴포넌트를 사용하고 Providere에 데이터를 전달하고 Consumer가 데이터를 받는다.

import React from "react";
//Context 선언
//아무 value도 전달하지 않는다면 ''를 기본값으로 사용한다.
const TitleContext = React.createContext("");

const Title = () => {
  //consumer 바로 밑의 함수의 인자에 context의 value가 들어간다.
  //contextValue라는 이름으로 전달 받고 있는 것.
  return (
    <TitleContext.Consumer>
      {(contextValue) => {
        return <div>{contextValue}</div>;
      }}
    </TitleContext.Consumer>
  );
};

const Header = () => {
  //Header에서는 Title에 아무런 값도 전달하지 않는다.
  return (
    <div>
      <Title />
    </div>
  );
};

const Page = () => {
  const title = "React Book";
  //Provider로 값을 저장
  return (
    <TitleContext.Provider value={title}>
      <Header />
    </TitleContext.Provider>
  );
};

export default Page;

Title 컴포넌트의 상위 컴포넌트인 Header에서는 아무런 값도 전달해주지 않지만 Context를 사용해 조부모 컴포넌트에서 선언한 값을 사용할 수 있다.

Provider는 중첩 사용이 가능한데 이때 Consumer는 트리 상에서 가장 가까운 부모에서 선언된 Provider의 값을 사용한다.

 

 

처음 리액트를 접하고 Virtual Dom이라든가 상태관리, Component화 등 어려운 개념이 많았는데 포스팅 읽어 보신 분들의 이해에 도움이 됐으면 좋겠다. 혹시 틀린 부분이 있다면 지적해주시면 감사하겠습니다. :)