React 기초

- 파일 구성

  . public/index.html : 실제 메인페이지

  . App.js의 내용을 index.js가 index.html에 넣어주는 것이다.

  . node_modules: library 모아두는 곳

  . public: static 파일 보관함 (압축이 안 됨)

  . package.json: 설치한 라이브러리들이 메모되는 곳

 

- JSX (데이터 바인딩)

  . className으로 클래스명을 선언한다.

  . App.css에서 스타일 수정

  . {} 안에 변수명을 그대로 넣어준다. 예: { 변수명, 함수 등 }

    . 뭐가 되었든 변수로 선언하고 싶으면 중괄호를 사용하면 된다.

    . style을 설정할 때도 무조건 중괄호 안에 object 자료형을 넣는다.

  . Image는 import해와서 사용한다.

  . 주석처리 시 중괄호로 감싸줘야 한다. 예: {/* ~~~~ */}

 

- state (데이터 보관 옵션)

  . state는 변수 대신 사용하면 데이터 저장공간이며, useState() 함수로 선언해야 한다.

  . useState 선언 시 [a, b] array가 남는데, a는 실제 변수, b는 변수 핸들링을 위한 함수가 들어가야 한다.

  . 보통 Destructuring으로 선언: let [var1, var2] = useState('asdf');

  . 사용하는 이유: 웹이 App처럼 동작하게 만들기 위해서

    . state 내 데이터가 수정되면 html이 자동으로 재렌더링이 된다(새로고침 없이 수정됨).

  . 변경이 잦지 않으면, 일반 변수나 하드코딩이 나을 수 있다.

  . 꼭 함수로만 변경해야 한다.

  . 부분 변경이 안 된다. 보통 Deep copy 후 copy한 데이터를 수정해서 바꿔치기한다.

 

- Component

  . div 선언을 한 단어로 쓰는 문법

  . div 선언문 전체를 하나의 function 안에 넣는다.

  . 재사용의 가능성이 높은 or 변경이 잦은 HTML들의 관리 용이성을 위해 활용하면 좋다.

  . Component 간 state 공유를 위해서는 props 문법을 사용해야 한다.

 

- 기타

  . 페이지 변경 router 기능을 사용한다.

 

 

*이 글은 코딩애플 님의 유튜브 강의를 요약한 글입니다.

https://www.youtube.com/watch?v=LclObYwGj90&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy