리액트 대 원칙 : immutable data
-
리액트를 쓰는 이유 : 데이터바인딩이 매우 쉽다. -> src, id, href에서 { 변수명, 함수 등 }
innerhtml 안써도 됨 -
jsx에서 style 속성을 집어넣을 때 : style={object 자료형으로 만든 스타일} (camelCase 작명 관습을 따름)
-
데이터는
- 변수에 넣거나
- state에 넣거나 (es6 destructuring 문법 사용 -> var [a,b] = [10, 100])
state는
변수 대신 쓰는 데이터 저장공간
useState()를 이용해 만들어야 함 (두개의 데이터가 들어간 array가 남게 됨)
문자, 숫자, array, object 다 저장 가능
state에 데이터를 저장해놓는 이유: 웹이 app처럼 동작하게 만들고 싶어서. state는 변경되면 html이 자동으로 재렌더링 된다. -> 새로고침 없이도 html에 재렌더링 됨
수정된 [데이터]를 만든다.
근데 state를 deep copy해서 수정한다. (reference data type 특징임)
deep copy : 값 공유 X, 서로 독립적인 값을 갖는 복사
Component 만들어두면 관리가 편해진다
Component 만드는 법
함수 만들고 이름 짓고
축약을 원하는 HTML 넣고
원하는 곳에서 <함수명 />
Component 유의사항
이름은 대괄호
return 안에 있는건 태그 하나로 묶어야함
어떤걸 Component로 만드는게 좋을까?
반복출현하는 html 덩어리들
자주 변경되는 html UI 들
다른 페이지를 만들때도 컴포넌트로 만듦
Component를 많이 만들면 단점
state를 쓸 때 복잡해짐 (상위 component 에서 만든 state를 쓰려면 props 문법을 이용해야 함)
조건
- 중괄호에서는 if를 인식할 수 없음 -> 삼항연산자로 대체
- 리액트에선 UI를 만들 때 state 데이터를 이용한다.
반복
- jsx 중괄호 내에 for을 넣을 수 없다.
- array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을때 => .map()
- 반복문 쓰는 법 : {반복할데이터.map(() => {return })}
컴포넌트간 통신
- 자식컴포넌트는 부모컴포넌트가 가진 state를 쓰려면 props로 전송을 해줘야 쓸 수 있음
- props로 자식에게 state를 전해주는 법
<자식컴포넌트 작명={전송할 state명} />
자식컴포넌트에서 props 파라미터 입력 후 사용
UI만드는 법
UI와 관련된 중요 정보들을 state로 저장해놓고
state에 따라서 UI가 수정되게 만들면 된다.
input -> onChange
사용자가 input에 입력한 값을 state로 저장해보자
사용자가 입력한 값은? e.target.value
컴포넌트 분리
내보내기 : export {변수1, 변수2}
가져오기 : import {변수1, 변수2} from 경로
페이지 나누기 (라우팅)
- react-router-dom 라이브러리 이용
- yarn add react-router-dom
- HashRouter : 라우팅을 안전하게 할 수 있게 도와줌
- 사이트 주소 뒤에 #이 붙는데 #뒤에 적는 것은 서버로 전달하지 않음
- 그래서 라우팅은 리액트가 알아서 잘 해줄 수 있음
- exact라는 속성을 추가하면 경로가 정확히 일치할 때만 보여줌
- switch 컴포넌트 : 여러개가 맞아도 하나만 보여줘라
스타일
- 스타일드컴포넌트 -> yarn add styled-components
컴포넌트에 직접 스타일을 넣어서 스타일링 하기 (css를 미리 입혀놓을 컴포넌트를 만들어서 씀) - sass -> CRA로 만들어진 프로젝트는 5.0 버전이랑 충돌나니 4.xx버전으로 다시 깔자 (yarn add node-sass@4.14.0)
useEffect 훅
컴포넌트의 Lifrcycle : 컴포넌트가 생성되기 전에 이것좀 해줘, 컴포넌트가 삭제되기 전에 이것좀 해줘
- 컴포넌트가 mount 되었을 때 컴포넌트가 update 될 때 특정 코드를 실행할 수 있다.
- 컴포넌트가 사라질 때 코드를 실행시킬 수 있다. return function 어쩌구() {실행할 코드
} - useEffect 여러개 사용 가능 -> 위 부터 차례로
타이머 쓸 때 주의
타이머는 변수에 저장
타이머를 쓰면 꼭 해제 해준다 clearTimeout
