리액트 정리

1. useEffect effect = componentDidMount로 수행할 기능 cleanup = componentWillUnmount로 클린업 할 기능 input = componentDidUpdate 조건을 넣어줌. 조건에 부합할 때 componentDidMount + componentDidUpdate 까지실행 (빈 배열이면 componentDidMount만 실행) useEffect(() => { effect return () => { cleanup }; }, [input]) 작성한 코드 부분 const Lotto = () => { const [selectedNumbers, setSelectedNumbers] = useState(getSelectedNumbers()); console.log(sel..

로또추첨기 Array 알고리즘 // 45개의 숫자를 랜덤으로 섞은 다음 -> 맨 앞 6개 숫자가 winning number / 맨 뒤 1개 숫자가 bonus number const candidate = Array(45) .fill() .map((v, i) => { return i + 1; }); console.log(candidate); /* Array(45): 크기 45개짜리 empty 어레이 만들어줌. fill(): 빈 어레이를 인덱스: undefine 로 전체 채워주기 map():으로 어레이 리턴 (인덱스 값만 추출) */ const shuffle = []; // Array(0) while (candidate.length > 0) { let randomNum = candidate.splice(Mat..

useReducer : 리액트에서 Redux 비슷한 효과를 낼 수 있다. useReducer + contextAPI = 소규모 앱 (간단하게, 리덕스 흉내.) Redux = 규모가 큰 앱 (비동기 부분 처리를 위해 결국 리덕스를 써야 한다. ) 훅스로 틱택토 만들기 ㅠ 다시보기 정리는 강좌 여기부터 https://youtu.be/xOJ5FvnBNoY?list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&t=1067

High order function (고차함수)로 바꾸기 onClickBtn = choice => {} this.onClickBtn('rock')}> Rock 밑에가 실무에서 많이 사용하는 방법. 간략하게 만들었다 onClickBtn = choice => () => {} Rock

componentDidMount에서 비동기요청을 한 후, 이걸 따로 끄지 않으면 컴포넌트가 소멸한 후에도 브라우저에서 계속 돌아서 메모리 냠냠 -> 컴터 폭파 ex) setInterval로 1초마다 문구 나오게 하고, 다른페이지 열어도 계속 살아있음. 점점 쌓임. 따라서, componentDidMount 와 componentWillUnmount는 짝으로 쓰자! 여기까지 바위->가위->보 순으로 이미지 돌아가게 만듦 import React, { Component } from 'react'; // Lifecycle of Class component // 컨스트럭터 - state에 있던 것들이 렌더가 될때 클래스에 붙는다. 혹시 ref가 있다면 ref까지 렌더링 된 후에 처리를 한다. 그렇게 첫번째 렌더링이 ..

Class // Lifecycle of Class component // 컨스트럭터 - state에 있던 것들이 렌더가 될때 클래스에 붙는다. 혹시 ref가 있다면 ref까지 렌더링 된 후에 처리를 한다. 그렇게 첫번째 렌더링이 끝났다면 componentDidMount가 실행된다. // 그러면 화면에 보인다. 그러면 component 안에서 setState를 하거나, 부모가 props를 바꿀 때, 이제 리렌더링이 일어나잖아요. // 그 리렌더링이 일어날 때, shouldComponentUpdate에서 return true가 되는 경우, 어? 리렌더링 해줘야돼. 니까 리렌더링 해줘야된다. 그럼 리렌더링이 일어난다. // 리렌더링이 일어난 후에는 componentDidUpdate, // 부모는 나를 없앨 수..

Class: render( ){ return ( 여기서 안돼 )} - 렌더의 리턴 안에서는 반복문을 사용할 수 없다. jsx에서는 조건문, 반복문 사용 불가.

setState는 render(){}안에 쓰는것 아니다. 왜? 렌더가 실행되면 this.setState가 실행되고, this.setState가 실행되면 렌더가 실행되고.. 무한반복 -> 브라우저에 문제를 발생시킴. 부모로부터 받은 props를 자식이 바꾸고 싶을 때 자식은 props를 바꾸지 않는다. 자식이 바꿔버리면 부모가 뜻하지 않게 바뀌어버림 -> 문제가 됨. 진짜 바꾸고 싶으면, state로 만든다음에 state를 바꾼다 Hooks import React, { memo, useState } from "react"; const Try = memo(({tryInfo}) => { // tryInfo.try = 'hello'; // 이러면 안돼요 const [result, setResult] = useS..