지금까지는 웹의 기본 원소인 HTML, CSS, JavaScript를 이용하여 웹 페이지를 만들어 보았고 그 과정 속에서 직접 DOM을 조작하고 이벤트를 다뤄보았어요. 이번 시간에는 이런 과정을 더욱 쉽게 할 수 있도록 도와주는 라이브러리인 React에 대해 알아보아요!

여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄

📚 공부할 내용

React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용해요. React는 웹 페이지의 UI를 컴포넌트로 나누고, 이 컴포넌트들을 조합하여 UI를 구성해요. 이렇게 컴포넌트 단위로 나누어진 UI는 재사용성이 높아져서 코드의 양을 줄여주고, 유지보수를 쉽게 해줘요.

어느 자료를 사용하든 React의 Component, JSX, Props, State, Event, Life Cycle, Hook부분을 중점으로 공부해 주세요!

프로젝트 실습 🎈

이번 주차에는 기존 프로젝트를 React로 리팩토링해 보아요!

  • CRA를 사용해서 프로젝트 생성하기
    • npx create-react-app {프로젝트 이름} --template typescript
      • typescript 템플릿을 사용하면 typescript로 작성된 react 프로젝트를 생성할 수 있어요!
  • 반복되는 코드를 컴포넌트로 분리하기
    • src 폴더 안에 components 폴더를 만들고 그 안에 컴포넌트를 만들어 보세요!
  • 상태 혹은 라우터를 사용해서 페이지를 구분하기
    • ex) 상태가 -1이면 리스트를 보여주고, -1이 아니면 상태에 해당하는 상세 페이지를 보여줘요!
      • ex) const [selectedPokemon, setSelectedPokemon] = useState(-1);
    • ex) 라우터를 사용해서 /detail&id={포켓몬 id}로 접속하면 상세 페이지를 보여줘요!

css는 기존에 작성했던 그대로 사용하면 되고 기존에 javascript로 작성했던 코드 위주로 component화만 잘해주면 크게 어렵지 않을 거에요!

프로젝트 실습 Tip 📌

  • 프로젝트 구조
    • src
      • components
        • PokemonItem.tsx
        • PokemonList.tsx
        • PokemonDetail.tsx
      • App.tsx
      • index.tsx
      • App.css
      • index.css
      • reset.css
      • data.js(포켓몬 데이터)
      • …

메인페이지 : PokemonList에서 PokemonItem 컴포넌트 호출을 통해서 구성해보아요!
디테일페이지 : PokemonDetail 컴포넌트를 이용해서 구현해보아요!