Published on

단어장 만들기로 React 시작하기

글쓴이

    react

    npx create-react-app voca

    : create-react-app을 통해 scratch부터 리액트 프로젝트를 세팅하지 않고 편리하게 초기 모듈과 프로젝트를 구성할 수 있다.

    node_modules

    : gitignore에 추가할 파일

    src

    : 대부분의 작업을 해당 폴더에서 진행

    npm start

    : localhost:3000에 리액트 프로젝트가 뛰워짐.

    hot module replacement (HMR)

    : 소스 수정을 저장할 때마다 실행중인 브라우저에 자동으로 반영되는 것

    component

    : component 단위로 요소를 구분하고, 조합해서 사용하면 유지보수와 재사용성이 높아짐.

    style

    : 동일한 className을 할당하면 렌더링 이후엔 동일한 html 파일에서 css를 import하기 때문에 style이 override되는 것을 확인할 수 있다. 그러므로, Jsname.module.css의 형태로 파일 이름으로 변경하고, import styles from 'css경로의 형태로 적용을 원하는 스타일 시트를 임포트해주어야 한다. 이렇게 해야, 동일한 요소 이름을 가져도 독립적으로 스타일을 관리 할 수 있다.

    event 처리

    : <button onClick={showName}>Show name</button>와 같이 미리 정의된 함수의 이름을 넘겨주거나 <button onClick={() => {showAge(10);}}>와 같이 화살표함수를 이용할 수도 있다.

    useState

    : import { useState } from "react"로 react의 상태관리 기능을 이용할 수 있다. const [isShow, setIsShow] = useState(false);의 형태로 상태를 선언하고, 초기값을 넘겨줄 수 있다. setIsShow를 호출해 상태를 세팅하고, 관리할 수 있다.

    property

    : <Hello age={10} />의 형태로 값을 넘길 수 있고, function Hello({ age }) 의 형태로 값을 받을 수 있다. 받은 값은 const이다.

    npm install react-router-dom

    : react-router-dom를 통해 페이지 라우팅을 할 수 있다.

    npm install -g json-server

    :설치한 후 json-server --watch ./src/db/data.json --port 3001의 형태로 rest-api를 위한 서버를 띄워 사용할 수 있다.

    useEffect

    : 를 사용해, 변경 후 렌더링된 직후의 시점에 해당 함수를 이용할 수 있다. useEffect의 두번째 인자는 의존성 배열로, 빈 배열을 넣으면 한번만 실행하겠다는 뜻이 된다.

    custom hook

    : fetch와 함께 useFetch.js에 커스텀 훅을 사용해 해당 훅으로 통일성있게, 코드의 재사용성을 높어 사용할 수 있다.

    발전을 위한 링크

    • 리액트에서 key가 왜 중요할까?