리액트 정리

Hook는 React 16.8에서 새로 추가된 개념입니다. Hook을 통해 class를 작성하지 않고도 state와 같은 React 기능들을 사용할 수 있습니다. 이 페이지는 React에 내장된 Hook API를 설명합니다. Hook이 생소하다면 Hook 개요를 먼저 읽어 보기 바랍니다. 혹은 frequently asked questions에서 유용한 정보를 찾을 수도 있습니다. 기본 Hook useState : (prevState)=>return [...prevState, newState] useEffect : componentDidMount + componentWillUnmount + componentDidUpdate (effect , clean-up, input) input인자 있음 useConte..

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Array Array() 생성자 Array() 생성자는 새로운 Array 객체를 생성할 때 사용합니다. developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill Array.prototype.fill() fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다. developer.mozilla.org 틱택토 두번째 강좌에 나오고,, 자꾸 나와서 정리해봄 Array()로 Array 생성..

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, // 부모는 나를 없앨 수..