TIL 23/06/19
후발대
node modules 란?
: 모듈이 모여있는 곳. 깃허브엔 안올라감. 깃허브에서 내려받을 땐 따로 다운받아야함.
컴포넌트인 것을 알려주기위해 .jsx 로 쓴다.
반복되는 요소를 맵으로. 리스트 출력부터 만들어보자.
리스트 반복출력을 위해 변수 갖고있어야한다. const arr 이런식으로
but, 우린 렌더링을 위해 state
state를 써야 아 변화가 있구나 인지하기때문?
리액트 state 비동기적?
리액트는 변경되는 state들을 모아서 한꺼번에 변경시킨다. Batch
setTodos([1,2,3,]);
console.log(todos) 해도 안나옴; 엥
todos가 변경되어야하기 때문에 state로 관리한다.
map의 인풋은 콜백함수
form 태그의 기본속성은 제출을 하면(onsubmit) 화면을 갱신한다(새로고침).
form태그 안의 button은 submit 된당~ 안써도 되지만 협업을 위해 써주는 것이 좋다.
id랑 isDond은 어떻게 만들지?,. uuid() ?ㅋㅋㅋ
~ id는 key={todo.id}
제목이랑 내용 어떻게 가져올 것인가? 인풋태그 안에 state 연결할거다.
제목, 내용을 변수화 시킬 거라는 말이다.
=> value는 박아넣겠다. a쓰면 아예 a로.
submit 속성 발동됐을 때.. form에 정의. 이 때 id,title 이런게 들어간다.
~자바스크립트 3주차 . 그 변수가 참조하는 주소값이 바뀌어야만 불변성이 유지된다.
push는 고유주소를 변경할 수 없다. 스프레드오퍼레이터 이런게 있어야한다.
uuid : 유니크한 값.
yarn add react-uuid
설치하면 => package.json 에 추가되고, node_modules에 추가된다.
import 해줘야함!!!
새로고침할 때마다 새로운 배열로 계속 바뀜.
삭제가 된 놈 빼고 나머지 놈으로, => filter
filter,map 공통점 : filtermap() 했을 때, 새로운 배열을 리턴해준다.
맵은 요소개수만큼, 필터는 조건에 맞는 애들만,
리턴문의 조건을 통해 필터를 수행한다. 콜백함수의
객체 vs 배열 구조분해할당 다르다.
객체는 이름만 맞으면 할당됨.
배열은 key 대신 인덱스자리가 맞아야 할당된다.
NEW
Style Components
Css - in -JS
패키지? 리액트에는 없지만 외부에서 가져와서 사용할 수 있는 외부라이브러리
3rd party. npm vs yarn npm이라는 마켓 안에 다 들어있었다.
vscode 확장에서 vscode-styled-components 설치하기!
1) yarn create react-app '프로젝트명'
2) 터미널에서 yarn add styled-coponents 하면 npm 마켓에서 패키지를 가져온다.
그러면 package.json에 설치한 styled-coponents가 들어가있다.
이제 styled-components 어떻게 사용하는지?
꾸미고자하는 컴포넌트를 스타일드 컴포넌트방식대로 먼저 만들고, 그 안에 스타일 코드 작성하는 방식.
임포트해줘야함 : import { styled } from "styled-components";
만들어진 styled 컴포넌트는 실제 html 태그처럼 사용된다
styled.div 처럼 . 뒤에는 html 태그가 온다.
css-in-js라는 방식 자체가 뭐냐면 자바스크립트 방식으로 css작성하는거라서,
if문, switch문, 삼항연산자 이런것들을 사용할 수 있다라는 것. 이것이 styled-components의 큰 장점이다.
~ 멀티라인으로 쓸 때는 소괄호!!
// props : 부모 컴포넌트에서 자식컴포넌트로 내려주는 데이터
~ `백틱 안에서 자바스크립트 쓰려면${}`
=> 1. CSS-in-JS : 자바스크립트로 CSS 코드를 작성하는 방식
2. props를 통해서 부모 컴포넌트 -> 자식컴포넌트로 데이터를 전달받아서 조건부 스타일링 가능
2강
GlobalStyles ? 전역 스타일링,, : 프로젝트 전체를 아우르는 스타일!
globally 선언,,
styled-components 사용했을 땐 해당 컴포넌트 내에서만!
createGlobalStyle : GlobalStyle에서 제공하는 API
=> 공통적으로 적용할 css는 여기서 글로벌스타일로 적용한다!
Sass(Syntactically Awesome Style Sheets)란?
변수 사용 가능, 네스팅(중첩)가능, 임포트 가능.
3강 리액트 훅 React Hooks - useState
- 가장 기본적인 hook
- 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함.
- 카운터, Todolist
const [state, setState] = useState(초기값);
원래는 useState가 리턴하는 값이 배열이다. 그걸 구조분해할당으로 받았을 뿐.
함수형 업데이트...!!!
왜 함수형 업데이트가 필요한지, 그 방법은 무엇인지.
react에서는 한꺼번에 모아서 업데이트하기때문에
setNumber(number + 1);
setNumber(number + 1);
setNumber(number + 1); => 이렇게 세번 실행해도 한번만 업데이트한다. +1만 됨.
but, 함수형 업데이트는 명령들 모아서 순차적으로 한번씩 실행.
setNumber((currentNumber) => currentNumber + 1);
setNumber((currentNumber) => currentNumber + 1);
setNumber((currentNumber) => currentNumber + 1); => 세번실행된다. +3 됨.
setNumber((현재 state) => 반환 state);
리액트 환경 안에서 렌더링이 많이 일어나는건 좋은 일이 아니다.
렌더링이 잦다! -> 성능에 이슈가 있는 것!
렌더링 줄이기 위해서 한꺼번에 모아서 한번만 실행하는 것이다. 배치 업데이트.
4강 React Hooks - useEffect
- 의존성 배열(dependency array)
useEffect : 렌더링 될 때마다, 특정한 작업을 수행해야할 때 설정하는 훅.
어떤 컴포넌트가 렌더링 될 때(최초든 리렌더링이든) 어떤 작업을 수행하게하는 훅.
-> 컴포넌트가 화면에 보여졌을 때
-> 컴포넌트가 화면에서 사라졌을 때(return)
- input에 값을 입력
- value, 즉 state가 변경
- state가 바뀌었기 때문에 -> App 컴포넌트가 리렌더링
- 리렌더링 -> useEffect()
- 1~4번 계속 반복
=> Dependency Array 가 필요하다
의존성 배열
: 이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행한다!
어떤 컴포넌트가 화면에서 사라졌을 때 실행하고싶다면? clean up
// clean up
useEffect(() => {
console.log(`hello useEffect! : ${value}`);
return () => { // return문으로 clean up 부분 작성
//
console.log("나 사라져요!");
};
}, [value]); // 두번째 인자로 어떤게 바뀌면 실행할 지5강 useRef
- 저장공간으로서의 useRef, DOM요소 접근 방법으로서의 useRef
렌더링 되지 않음. console.log찍으면 변하지만.
useEffect(() => {
if (id.length >= 10) {
pwRef.current.focus();
}
}, [id]); //id라는 state가 바뀔때마다 실행.이렇게 말고
onChange={(event) => {
setId(event.target.value);
// 리액트에서 state -> 배치업데이트
if (id.length >= 10) {
pwRef.current.focus();
}
}}이렇게 해도 되지않나? but 11번째에서 비밀번호로 focus됨. 왜? 리액트에서 state는 배치업데이트라서 하나씩 늦는다.
6강 React Hooks - useContext(Context API)
// props로 내려준 값을 쓴 게 아니라, context를 이용해서 값을 받아왔다.
but, 마구잡이로 쓰면 안된다. 렌더링 문제가 있다.
Provider에서 제공한 value가 달라지면 그 아래.. 가져간 애들 다 리렌더링..
그 대안 -> 메모이제이션
7강 React Hooks - 최적화(React.memo, useCallback, useMemo)
캐싱 :
8강 React Hooks - useCallback
App.jsx라는 애는 컴포넌트지만 결국에는 함수예요. function keyword로 이루어진,,
근데 count를 초기화해주는 함수 initCount도 App.jsx라는 컴포넌트가 리렌더링될 때 다시 만들어진다. Box1 안에 있는 onClick부분도 initCount가 다시 만들어졌기 때문에 props로 새로운값을 전달받았다고 여겨진다.
여기서! 함수도 객체?,, 별도의 주소값있는 객체로 저장된다. 그래서 리렌더링될 때 함수들이 새로 만들어질 때 이전함수는 그대로 있고, initCount를 새로운 주소값으로 저장한다. 그래서 props로 내려줄 때 Box1 입장에서는 아 props가 바뀌었구나 하고 리렌더링~!
=> useCallback((함수를 감싸준다), [의존성배열까지])
13강 REDUX-COUNTER-BASIC
yarn add redux react-redux 명령어로 설치하기 -> package.js에서 확인하기
리덕스가 중앙데이터관리소에 접근하고 데이터를 제어한다.
중앙데이터관리소 = store
src 아래 redux 폴더 아래 config 아래 configStore.js 파일
redux 아래 modules 폴더
=>
redux : 리덕스 관련 코드를 모두 몰아넣음
config : 리덕스 설정 관련 파일 전부
configStore : 중앙 state 관리소 -> 설정 코드(.js)
modules : state의 그룹! Todolist. todos.js
@@너무 이해 안되면 과감하게 이해 포기하고 사용 방법만 익혀라!
rootReducer : 리듀서들을 모아서 한개로 만들어놓은 기본 리듀서
~~ export default 로 내보내면 import 할 때 중괄호 필요없다.
<Provider store={store}> // App컴포넌트 이하에서는 스토어사용 할 준비 됐다.
<App />
</Provider>리덕스 어렵다
