[ReactJS] 리액트 기본

설정

다운로드: npx create-react-app 폴더명
실행: npm start
라우터 다운로드: npm i react-router-dom@5.3.0

JSX

• xml과 비슷하게 생긴 자바스크립트의 확장 문법
• if문 사용 불가, 삼항연산자 사용 { 조건 ? (참) : (거짓) }
• for문 사용 불가, map사용
• class가 아닌 className 사용
• 태그는 항상 닫아야 한다
• 주석 처리방법: {/* 주석 내용 */}

Element & Component

• 리액트 엘리먼트: 일반 객체, 엘리먼트를 생성한 이후에 변경할 수 없다.
• 컴포넌트: 함수와 유사하며, 함수 컴포넌트와 클래스 컴포넌트가 있다.

Props & State

• props: 컴포넌트 속성 설정 요소, 읽기 전용

• state: 컴포넌트 내부에서 바뀔 수 있는 값

CodeSandBox

//Test.js
function Test({ number }) {
  return <h3> {number}번째</h3>;
}
export default Test;

//App.js
import { useState } from "react";
import "./styles.css";
import Test from "./Test";

export default function App() {
  const [objects, setObjects] = useState([]);
  const [count, setCount] = useState(0);
  function add() {
    setCount(count + 1);
    objects.push(count + 1);
  }
  function remove() {
    if (count > 0) {
      setCount(count - 1);
      objects.pop();
    }
  }

  return (
    <div className="App">
      <h1>{count}</h1>
      {objects.map(function (i) {
        return <Test number={i} key={i} />;
      })}
      <button onClick={add}> 추가 </button>
      <button onClick={remove}> 감소 </button>
    </div>
  );
}

• useState의 set~()은 새로운 변수를 만들고 함수가 끝날때 적용된다. 함수가 끝나기 전에는 이전값이 사용된다.
• useState를 사용하지 않으면 화면이 바뀌지 않는다.

useEffect

CodeSandBox

//App.js
import { useState, useEffect } from "react";
import "./styles.css";

function App() {
  const [count, setCount] = useState(0);
  console.log("버튼을 누를 때 마다 실행");
  useEffect(() => {
    console.log("한번만 실행")
  }, [/*배열 안에 있는 변수가 바뀔때만 실행*/]);
    //빈 배열을 두번째 인자로 전달하면 다시 실행되지 않음
  return <div>
    <h2>{count}</h2>
    <button onClick={()=>{setCount(count+1)}}>숫자 증가</button>
  </div>;
}

export default App;

참고

React 공식 홈페이지 https://ko.reactjs.org/

노마드코더, ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners

김민준, 리액트를 다루는 기술, 길벗