React 맛보기

React

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
• 개발 환경 구축

  https://nodejs.org/ko/download/
  node : 16.14.0
npm : 7.24.2

• npx create-react-app MY-APP 설치
• 해당 폴더로 이동 후
• npm run start 시작

타입스크립트 쓸때는 jsx 대신 tsx 쓰시면 됩니다

컴포넌트 & JS

• 컴포넌트: 개발자가 만든 맞춤 태그 (like div, a, p)
• JS: 대문자로 시작하는 파일 이름을 만든다.
• JS 파일 내의 함수와 같은 이름을 사용한다.
• 기존 HTML 태그와 겹치지 않기 위해 대문자로 시작.
• <div></div> 대신 <> </> 사용 가능하다
• <></>는 fragment라서 실제 div를 만들긴 싫은데,
  문법적으로 하나의 최상위 태그를 남기기 위해 사용한다.

// rfce
function App() {
  // es6+ 문법을 사용한 JS 관련 내용 
  return (
    // retrun 안에서는 html 이랑 관련된 내용
    // tag 를 하나만 넣어야함 
    <div>
    	<p>
    	</p>
    </div>
  );
}

export default App;

es6+ 문법

• 배열로 리턴하는 함수의 값을 배열로 받을 수 있습니다.
• state: 문자, 숫자, 배열, 오브젝트, 기타 등등
• react는 for문을 사용할 수 없다.
• .map() 사용

UseState

• react의 함수 이다.
• html css js 웹페이지를 만들었는데, 브라우저에서 이것을 읽어서 보여주고, 변화가 있을 시 매번 웹페이지가 재구축 된다.
• 싱글페이지 react 바뀌는 부분만 확인하고 그 부분만 바꿔줌
• 확인 및 이동 컨텐츠 변경시 새로고침은 발생하지 않음!
• state를 바꾸는 함수를 사용해야한다, 한번만 사용해야 한다
• 한번 선언된 한가지의 type으로 끝까지 사용할것 !

import React, { useState } from 'react';

function TestComponent() {
  const [List, setList] = useState(['A', 'B', 'C', 'D', 'E']);
  return (
    <div>
      <span> 리스트 :</span>
      {List.map((엘리먼트, 인덱스) => {
        return (
          <p>
            {인덱스} :{엘리먼트}
          </p>
        );
      })}
    </div>
  );
}

export default TestComponent;

useState 관련 학습 필요