React 기초, Component

react 좋은 이유
- SPA (single page application) -> 페이지 전환 부드럽게
- component -> html 재사용성 굿
- 데이터가 html 재렌더링 자동반영
 
웹페이지는 html에서 이용해야함. 근데 어떻게 자바스크립트로 가능하냐?
App.js - (index.js)-> index.html
index.js가 App.js 를 index.html로 바꾸줌

Node js 뭐임?

1) 컴퓨터에게 자바스크립트로 명령을 내릴 수 있게 하는 도구

자바스크립트로 작성한 코드를 컴퓨터가 알아들을수 있게 통역해주는 프로그램

*자바스크립트는 웹서핑을 하는데 사용되는 프로그램인 브라우저에서만 동작하는 언어
웹사이트 만들때만 쓸 수 있고 웹사이트 안에서만 동작하는 언어

 

우리는 JSX 문법으로 코드를 작성. -> 하지만 브라우저는 자바스크립트가 아닌 JSX 읽을 줄 모름

브라우저가 알아들을 수 있는 자바스크립트로 번역해주는 빌드작업을 Node js가 함.
-> 이렇게 컴파일된 자바스크립트를 브라우저가 실행해서 웹페이지가 동작함.

2) 리액트 기반 웹페이지를 만드는데 여러 라이브러리를 자동으로 다운받아 설치
리액트 이용해 프로젝트 만들때 필요한 필수 코드도 자동으로 생성해줌.
코딩 편하게 해주는 애.

 

npm은 뭐임?

간단히 패키지 메니저

npm run dev 등 -> 라이브러리 편하게 다운받게 해줌

 

npm run dev

HMR ( Hot Module Replacement)
페이지 세로고침 없이 코드 수정 반영 기술

코드 수정 결과를 실시간으로 확인하면서 개발할 수 있도록 해주는 것이 dev(package json참조)

 

npm run bulid 하면 assets 폴더안에 이상한거 생김

-> 컴파일된 것이 들어가 있음. 빌드할때마다 네임이 바껴서 캐싱할 때 바뀐거임을 알려줌

 

public 폴더
안의 것은 있는 그대로 배포되고

ex) 파비콘, 전역설정 파일 등 특정 컴포넌트에 국한되지 않는 정적 파일

src 폴더
번들러에 의해 최적화된 가공을 거침. 이름이 바껴짐.
컴포넌트에 사용되는 요소들은 src 폴더에 들어감

state 사용하고 싶을떈,
useState를 사용해서 변수에 담자
let[a, b] = useState('zzz');
-> a는 변수, b는 변경함수
let [a, c] =  [1, 2]; -> destructuring 문법
원래는 let a=  num[0];  let c = num[1] ;
 
shallow copy/ deep copy

let [글제목, 글제목변경] = useState(['s', 'b']);

- 변경 안됨
let copy = 글제목;  => shallow copy 는 주소값, 참조를 복사하는거
=> 메모리 덜 소모. 하지만 참조 공유로 데이터 같이 바뀌는 거 조심
copy[0] = 'aaa';

- 변경됨
let copy = [... 글제목]; => deep copy 완전 독립적 복사본 생성
copy[0] = 'aaa';
 
package.json
-> 설치된 라이브러리 버전 확인 등
 
Component 를 이용해서 보기싫은 div 들을 줄여보자
 

 

function 을 이용해보기
Component 유의사항

1. 이름은 대문자
2. return() 안에 있는 건 태그하나로 묶기
=> (<div /><div/ ><div /> 안됨, div 하나에)

 

어떤 걸 Component 로 만드는게 좋을까?

반복되는 Html 덩어리
자주 변경되는 Html UI들
=> 관리가 편하다
다른 페이지 만들때도 사용함
 
단점은, state 쓸 때 복잡해짐. -> props 이용

참고) 코딩애플 유튜브/ 얄팍한 코딩사전