09/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── ~/likelion-script/script_js/React/works/
│   │   └── Title.tsx
│   └── pages/
│       └── todo/
│           └── List.tsx
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.node.json

📜 09 Vite로 개발 환경 구축 및 빌드, 배포

• 💻 Title.tsx
• 💻 List.tsx
• 💻 App.tsx
• 💻 main.tsx
• 💻 index.html
• 💻 eslint.config.js

• 개념

  4. JSX

  4.1 JSX란?

  • JSX(JavaScript XML)는 자바스크립트 파일 내에 HTML과 유사한 마크업을 작성할 수 있게 해주는 자바스크립트 확장 구문
  • React에서 사용할 목적으로 개발되기는 했지만 JSX가 React에 포함된 기술은 아니기 때문에 React에서 JSX 사용이 필수는 아님
    • React.createElement() 직접 사용

  4.2 JSX 규칙

  1 단일 루트 요소를 반환해야 한다.

  • JSX는 자바스크립트 객체로 변환되는데 함수가 여러 객체를 반환 할 수 없으므로 단일 객체를 반환하도록 해야함

  • 만약 단일 요소를 반환하지 않을 경우 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 에러 발생

    return (
      <h1>Todo List</h1>
      <div>...</div>
    );

  • 루트 요소를 추가

    return (
      <div>
        <h1>Todo List</h1>
        <div>...</div>
      </div>
    );

  • Fragment 사용

    • 렌더링 결과에는 영향을 미치지 않음

    return (
      <Fragment>
        <h1>Todo List</h1>
        <div>...</div>
      </Fragment>
    );

  • Fragment의 약어 사용

    return (
      <>
        <h1>Todo List</h1>
        <div>...</div>
      </>
    );

  2 모든 태그는 닫는다.

  • HTML에서는 닫는 태그를 생략 할 수 있지만 JSX는 XML과 유사한 문법이므로 닫는 태그를 항상 작성해야 함

    • HTML 예시

      <img src="./logo.png">
      <br>
      <ul>
        <li>두부
        <li>계란
        <li>라면
      </ul>

    • JSX 예시

      <img src="./logo.png" />
      <br />
      <ul>
        <li>두부</li>
        <li>계란</li>
        <li>라면</li>
      </ul>

  3 요소의 속성명은 카멜 표기법(camel case)을 준수해야 한다.

  • 속성명은 HTML 표준 속성명이 아닌 DOM API 스펙에 기반을 둠

    • stroke-width -> strokeWidth
    • onclick -> onClick
    • onkeyup -> onKeyUp

  • HTML에서 class 속성 추가

    <div id="todolist" class="todo"></div>

  • 자바스크립트에서 class 속성 추가

    document.querySelector('#todolist').className = 'todo';
    
    

  • JSX에서 class 속성 추가

    <div id="todolist" className="todo"></div>

  • JSX에서 class 속성을 동적으로 추가

    const todoClass = 'todo';
    <div id="todolist" className={ todoClass }></div>

  • 자바스크립트 예약어라 충돌을 피하기 위해 속성명 자체가 바뀐 경우

    • class -> className
    • for -> htmlFor

  4 보간법{ }을 사용할 때에는 표현식을 사용해야 함

  • { } 안에는 변수값, 메서드 리턴값 등 값만 사용 가능
  • if 문, for 문 등은 사용할 수 없음

    • if 문 대신 삼항 연산자 사용

      { item.done ? <s>두부</s> : '두부' }

    • for 문 대신 forEach(), map() 등 사용

      {
        for(let i=0; i<itemList.length; i++){
          return item.title;
        }
      }

      { itemList.map(item => item.title) }

  5 보간된 HTML 문자열은 인코딩됨

  • { } 내부의 값이 HTML 코드가 포함된 문자열인 경우 HTML 태그를 인코딩해서 처리하므로 브라우저에는 태그가 그대로 보여짐

    • XSS (Cross Site Scripting) 같은 공격에 대비하기 위한 규칙

  • 예시

    const App(){
      const msg = '<i>World</i>';
      return <span>Hello { msg }</span>
    }
    // 만들어지는 문자열: <span>Hello &lt;i&gt;World&lt;/i&gt;</span>

  • 실행 결과

    • Hello World

  • 해결 방법

    1. dangerouslySetInnerHTML 속성을 사용하면 HTML 태그를 인코딩하지 않음

    const App(){
      // { msg }를 <span dangerouslySetInnerHTML={{ __html: msg }}></span>로 변경
      const msg = '<i>World</i>';
      return <span>Hello <span dangerouslySetInnerHTML={{ __html: msg }}></span></span>
    }

    1. JSX는 XSS 공격에 안전하므로 JSX를 사용

    const App(){
      // const msg = '<i>World</i>';
      const msg = <i>World</i>;
      return <span>Hello { msg }</span>
    }

• 개념

  5. 속성 (Props)

  • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용

    // ch02-start/todo/08.html
    function App(){
      const list = [
        { _id: 1, title: 'React 공부', done: false},
        { _id: 2, title: 'Javascript 프로젝트', done: true},
        { _id: 3, title: 'Javascript 공부', done: true},
      ];
    
      return (
        <div id="app">
          <div>
            <Title title="08 Simple Todo List - React Props" />
            <TodoList list={ list } />
          </div>
        </div>
      );
    }
    
    function Title({ title = 'Todo List' }){
      return (
        <div>
          <h1>{ title }</h1>
          <hr />
        </div>
      );
    }
    
    function TodoList({ list }){
      const itemList = list.map(item => {
        return (
          <li key={ item._id }>{ item.title } - { item.done ? '완료' : '진행중' }</li>
        );
      });
    
      return (
        <ul className="todolist">
          { itemList }
        </ul>
      )
    }

  • 함수에 데이터를 전달할 때 인수를 사용하듯이 컴포넌트에 데이터를 전달할 때 Props를 사용

    • JSX에서 자식 컴포넌트를 HTML 태그처럼 사용할 때 HTML 태그의 속성을 지정하는 것처럼 사용

    <TodoList list={ list } />

  • 부모 컴포넌트가 전달한 여러 속성이 자식 컴포넌트에는 하나의 Props 객체로 전달되므로 주로 구조 분해 할당을 이용해서 필요한 속성을 바로 꺼내서 사용

  function TodoList({ list }){
    ....
  }

  • 기본값 매개변수를 사용하면 Props가 전달되지 않거나 undefined가 명시적으로 전달될 때 적용됨

    • null, 0 값은 기본값으로 대체되지 않음

  • 자신이 전달받은 Props 전체를 자식 컴포넌트에 전달하고 싶을 때는 전개 연산자를 사용

    function Profile(props) {
      return (
        <div>
          <Avatar { ...props } />
        </div>
      );
    }

  • Props로 객체를 전달 받을 때 자식 컴포넌트가 그 값을 직접 변경하는 것은 권장하지 않음

    • React의 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달되는데 자식 컴포넌트에서 부모 컴포넌트의 데이터를 직접 수정하면 데이터의 흐름을 예측하기 어려워서 디버깅하기 어려운 오류를 만들 수 있음

📜 10 Button 컴포넌트에 Props 전달

10/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Button.tsx
│   │   ├── Counter.tsx
│   │   └── Header.tsx
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

• 💻 Button.tsx
• 💻 Counter.tsx
• 💻 Header.tsx
• 💻 App.tsx
• 💻 main.tsx