React

🔸 학습내용

(1) vscode에서 리액트 실행하기

• 터미널 상에서 프로젝트 생성하기

  1. vscode에서 터미널을 실행(단축키 : ctrl + j)
  2. 원하는 위치에서 프로젝트(proj3) 생성 명령어 입력
     npx create-react-app proj3
  3. 리액트 실행 종료 단축키 ctrl + c

• 생성된 프로젝트로 이동 cd proj3

• npm start 명령어 입력 후 정상적으로 실행되는 지 확인

• 아래와 같은 화면이 뜬다면 성공
  (SPA 형식이라 초기 구동은 느림 이유는 (2)번 에서 정리하고자 한다.)
  

• 추가로 편리한 코딩을 위해 vscode plugin 설치
  reactjs code snippets

(2) SPA

• Single Page Application의 준말로 페이지가 하나라는 뜻
• 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려줌
• 새 페이지로 넘어갈 때 서버에서 html, css, js 소스를 가져올 필요가 없어 끊김이 없다
• 단점은 처음에 필요한 리소스를 다 가져오므로 초기 구동 속도가 느림

(3) 리액트 파일구조

• node_modules : 해당 프로젝트에 대한 라이브러리가 저장되어 있음
• public : html파일, img 등 정적 파일을 넣는 디렉토리
• src : 코드의 대부분이 이 디렉토리에 위치함
• components : pages에서 사용할 컴포넌트들이 들어가 있다.
• pages : app.js 파일에서 react-router-dom을 사용해서 나눈 라우팅의 컴포넌트가 여기에 정리됨

(4) 컴포넌트와 props

1. 컴포넌트

• 컴포넌트 = 사용자 정의 태그
• 함수를 정의 하는 것으로 컴포넌트를 만들 때는 반드시 대문자로 시작해야한다.

2. Props

• props = 속성
• 컴포넌트의 매개변수에 props를 넣어 다양한 값을 불러올 수 있다.
• props는 객체형태로 전달된다.
  
• defaultProps를 추가하여 기본값을 설정할 수 있다.
  

3. JSX

• JSX = JavaScript + XML
• 하나의 파일에 자바스크립트와 HTML을 동시에 작성
• 별도의 컴포넌트 파일을 만들어서 App.js 파일에 연결하기

  • 컴포넌트 파일 생성 : TodayPlan.jsx
    (파일 생성 후 rcc 입력, 엔터 > 자동으로 기본 골격이 갖춰짐)
  • App.js 파일에 컴포넌트 파일 연결해주기
    import 컴포넌트명 from '파일경로'
    

(5) 리액트 훅 - useState 실습

• useState는 리액트 훅의 종류 중 하나

• 리액트 훅이 등장하게 된 이유?
  클래스형 컴포넌트가 함수형 컴포넌트에 비해 가진 단점들에 의해, 일반적으로 함수형 컴포넌트를 사용해 개발을 진행하지만, state나 Life Cycle Method를 사용하기 위해서는 클래스형 컴포넌트를 사용해야했다.
  이에 등장하게 된것이 리액트 훅.
  리액트 훅은 함수형 컴포넌트에서도 state나 Life Cycle Method를 사용할 수 있게 해준다.

  참고
  https://devbirdfeet.tistory.com/52
  https://velog.io/@yangddu/React-Hook

• 숫자 카운팅 실습

  • 리액트 훅의 기능 중 하나인 useState 사용
    

---

🔸 어려웠던 점, 해결방법

수업 중에는 용어만 언급하고 바로 실습을 하셨기 때문에 이해되지 않는 개념이 많았다. 모든것을 이해하고 넘어가자는 아니지만 그래도 어떤 원리로 왜 작동하는 건지 알고 넘어가야 기억에 남기 때문에 생활코딩 리액트 강의를 참고해서 공부했다.

---