리액트 기본 개념 - 4

라이브러리 추가할 때

  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>

 

이렇게 여러 라이브러리를 추가할 때가 있다. 근데 여기 자세히 보면 umd, standalone이런 단어가 있다. 

이게 무엇이냐? 아래와 같다.

• umd 여러환경에서 작동하도록
• standalone : 브라우저에서만 사용

babel

babel이란? 

JS 코드를 구형 브라우저나 실행 환경에서도 동작하도록 변환(트랜스파일)해주는 도구이다.

여기서 만약에 

<script type="text/babel"> -> 변환 O

<script type="text/javascript"> -> 변환 X

  <script type="text/babel">
    function App() {
      return <h1>Hello JSX</h1>;
      // return React.createElement('h1', null, 'Hello React');
    }

 

구조분해할당, Props

부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달할 때 두 가지 방법이 있다.

 

1. 구조분해할당

이는 구조분해할당으로 {}를 통해 필요한 데이터만 받아오는 것이다. 이는 필요로 하는 데이터만 접근할 수 있게 하여 코드가 좀 더 간결해진다.

function TodoInput({ addItem }) {
  const [title, setTitle] = React.useState('');
  const [nextId, setNextId] = React.useState(4);

  const handleAdd = () => {
    if (title.trim() !== '') {
      const item = { _id: nextId, title, done: false };
      addItem(item);

      setNextId(nextId + 1);
      setTitle('');
    }
  };

 

2. props

아래와 같이 props 를 통해서, 필요한 데이터를 전달 해주는 경우가 있는데, 이때 이 것이 아닌 

  <TodoList {...props} /> 이렇게 한꺼번에 넘겨주는 경우가 있는데, 이는 결코 좋은 방법이 아니다. 뭐 필요하지 않는 데이터를 사용하지 않을수도 있지만, 이는 명확성 측면에서 좋지 않다. 정확하게 어떤 데이터가 넘어오는지 보이지 않는다.

그리고 불필요한 리렌더링일 될 수도 있어, 성능 최적화에 좋지 않다.

만약 props의 구조가 변경 되었을 때, 자식 컴포넌트 들이 예상치 못한 props를 받을 수도 있어, 버그 발생할 가능성이 높다. 

function Todo(props) {
  return (
    <div id='main'>
      <div id='container'>
        <ul>
          <li>
            <h2>쇼핑 목록</h2>
            <TodoInput addItem={props.addItem} />
            <TodoList itemList={props.itemList} toggleDone={props.toggleDone} deleteItem={props.deleteItem} />

 

** 그리고 여기서 주의할 점이 있다. 만약 전달 받을 때, 자식 컴포넌트가 그 값을 직접 변경하는 것은 좋지 않다.

그 이유는 리액트의 데이터는 상위 컴포넌트에서 하위 컴포넌트로 전달이 되는데, 하위 컴포넌트에서 상위 컴포넌트의 데이터를 직접 수정하면 데이터의 흐름을 예측하기 힘들어서 디버깅하기가 어려운 오류를 만들 수도 있다.

 

List 데이터 출력에서 key 입력

우리가 어떠한 리스트를 출력하고 싶을 때, item의 개수가 정해져있고, 각각 내용이 다르게 출력해야하는 경우가 있다.

여기서 map 메서드를 주로 사용하는데, 이는 item의 개수만큼 출력해주는 것이다.

아래 코드와 같이 나타낼 수 있는데, list를 구조분해할당으로 전달해주며, map 메서드를 통해서 li요소를 생성해주며 이 안에 title를 출력해준다. 근데 여기서 만약 key를 입력하지 않았을 때, 

function TodoList({ list }) {
      const itemList = list.map((item) => <li key={item._id}>{item.title}</li>);
      // 몽고디비에서 데이터 식별하기 위해 _(언더바)를 사용하는 것이다.

      return (
        <ul className="todolist">
          {itemList}
        </ul>
      )

    }
    function App() {
      const title = 'React Props';
      const list = [
        { _id: 1, title: '리그오브레전드', done: false },
        { _id: 2, title: '영화 보기(집에서)', done: false },
        { _id: 3, title: 'GTA5', done: false },
      ];
      return (
        <div id="app">
          <div>
            <Title title={title} />
            <TodoList list={list} />
          </div>
        </div>
      );
    }

 

키 오류

아래와 같은 키 오류가 나온다. 경고이다. 이는 기능 상의 문제는 없지만, 성능적, 유지보수의 문제가 생길 수도 있다. 그 이유는 key 속성은 리스트 항목 마다 고유한 값을 지정하는 역할을 한다. React가 가상 DOM(Virtual DOM)과 실제 DOM을 비교할 때, 이 key를 기준으로 변경 사항을 추적하기 때문이다.

그래서 key 속성을 지정하지 않으면 React는 각 항목을 고유하게 식별할 수 없어서 불필요하게 전체 리스트를 다시 렌더링할 가능성이 있다. 성능 최적화를 위해 고유한 key를 설정하는 것이 좋다.

hook.js:608 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TodoList`. See https://reactjs.org/link/warning-keys for more information.
    at li
    at TodoList (<anonymous>:12:19)
    at div
    at div
    at App

 

그리고 위 key의 경우는 임의대로 지정할 수 있어, 자유롭게 설정하면 된다. 그리고 위에서는 _id를 사용했는데, 이는 몽고DB에서 각 문서에 _id라는 기본 키가 있다. 이 키는 각 문서를 고유하게 식별하는 역할을 하며, mongoDB에서 자동으로 생성한다.

React에서 리스트를 렌더링할 때 고유한 키가 필요하므로, MongoDB의 _id를 key 속성으로 사용하면 React가 각 항목을 효율적으로 추적하고 렌더링할 수 있다.

 

build

프로젝트를 하다보면 이제 local 환경과 배포 환경에서 제대로 작동이 되는지 확인을 해봐야 한다. 그래서 배포를 하고 그 환경에서 잘 작동하는지 확인하기 위해 입력하는 것이 npm run build이다. 이는 보통 vite에서 만들어진 프로젝트에서 진행을 하는 것이다. 

여기서 build란 JS 코드를 최적화하고, 컴퓨터가 효율적으로 실행할 수 있도록 코드를 압축하는 과정이라고 보면 된다. 

JS는 인터프리터 언어로, 기본적으로 코드가 작성된 그대로 실행이 된다. 그러나 build 단계에서는 JS 코드를 작은 용량으로 압축하고, 불필요한 주석과 공백을 제거하고, 코드를 최적화하여 브라우저가 더 빠르게 로딩이 될 수 있도록 해주는 것이 build이다.

 

여기서 인터프리터(Interpreter)와 컴파일(compile)이 있는데,

인터프리터는 프로그래밍 언어를 한 줄씩 읽고, 그때그때 바로 실행하는 방식이다 

인터프리터 언어는 JS, Python 등이다.

여기서 근데 자바스크립트는 인터프리터와 컴파일이 합쳐져있다고 보면 된다.

 

컴파일러는 모든 코드를 한번에 기계어로 번역 후에 그때 실행하는 방식이다.

컴파일 언어는 C, C++.  Java 등이다.