이재호

리액트 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 존재한다 과거 함수형에는 상태를 관리하는 기능이 없었기때문에 클래스형 컴포넌트를 이용해 리액트를 구축했는데 현재 함수형컴포넌트에도 훅이라는게 등장으로 다양하게 상태를 관리할수 있는 기능이 생겼다 레거시 코드가 아니라면 새 프로젝트에서 함수형 컴포넌트를 쓰는게 보다 더 직관적으로 편리하다 재목에는 useEffect와 clas에 생명주기를 작성하였다 생명주기란 앱이 실행되고 종료되는 과정을 특정 시점 별로 나눠둔 것을 말합니다 class 에는 핵심적인 3가지 생명주기가 존재합니다. ComponetDidMount() ComponetDidUpdate() ComponetWillUnmount() 첫번쨰부터 컴포넌트가 최초로 랜더링 될때 실행되는 메서드..

리액트는 상태나 props가 변경될떄마다 모든 컴포넌트를 재랜더링 합니다 만약 app.js라는 컴포넌트에서 상태를 변경한다고 하면 app.js와 상태가 연결되어있는 하위 컴포넌트들까지 재랜더링이 되면서 성능저하를 일으킵니다 작은단위의 프로젝트면 괜찮지만 큰 규모의 컴포넌트단위 프로젝트 같은 경우에는 큰 리소스를 차지할뿐만 아니라 불필요한 성능저하를 일으킬수 있습니다 그래서 나온것이 useMemo입니다. useMemo는 props가 실제로 변경되었을때, 새로운 값이 들어올때만 컴포넌트 함수를 재 실행하고 새값이 없다면 재랜더링을 하지 않습니다. 하지만 useMemo도 부족한 점이 있습니다 함수 컴포넌트 안에 함수를 생성해서 props 객체로 넘겨주면 useMemo는 이를 인식하지 못합니다. 그 이유는 객체..

프로미스란 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 then 을 붙히면 결과를 반환함 resolve(성공리턴값 ) : then으로 연결 reject(실패리턴값) : catch로 연결 finally 는 무조건 실행 const promise = new Promise((resolve, reject)=>{ setTimeOut(()=>{ resolve() }, 1000) }) promise.then(()=>{ console.log('a') }) const codition = true; const promise = new Promise((resolve, reject)=>{ if(codition){ resolve('성공') } else { reject('실패'..

ref란 reference 의 약자로 참조라는 뜻을 가지고 있다. ref는 아주 강력한 도구로 기본적인 기능으로는 다른 DOM에 접근하여 그것들로 작업을 할수 있습니다. ref는 함수 컴포넌트 안에서만 사용이 가능하며 ref 프롭은 key 프롭과 마찬가지로 내장 프롭입니다. 따라서 어떤 HTML요소도 넣을수 있습니다. ref값은 항상 객체입니다, 항상 current 프롭을 가지고 있습니다, current 프롭은 ref가 연결된 실제 값을 갖습니다 실제로 이렇게 ref와 연결된 값은 실제 DOM NODE 이며 여러가지 작업을 만지고 조작할수 있습니다. 그러나 DOM을 조작하기 위해 Ref를 사용하는일은 정말 드문일입니다. 만약 값만 바꾸고 아무것도 바꿀일이 없다면 Ref를 사용하는것도 하나의 방법입니다 보..

const x = 'x' function c(){ const y = 'y' console.log('c') function b(){ const z = 'z' console.log('b') c() } } function a(){ const x = 'x' console.log('a') b(); } a() c() 스코프체인 : 함수에서 어떤값에 접근이 가능한지를 알아내는것이다. 스코프 체인은 함수의 선언만 보면 됩니다 const x = 'x' function c(){ const y = 'y' console.log('c') function b(){ const z = 'z' console.log('b') c() } } function a() { const x = 'x' console.log('a') b() } //..

Hooks은 리액트 v16.8에 새로 도입된 기능으로 기존에 함수형 컴포넌트에서 할수 없었던 다양한 작업을 지원합니다. 그 패밀리들을 소개하자면 useState() usesEffect() useReducer() useMemo() useCallback useRef Custum Hook 정말 많은 기능이 추가되었다 ㅎㅎ 공부할게 많아서 행복하다 ^^.. useState() 함수형 컴포넌트에서 가장 기본적인 훅으로 가변적 상태를 지닐수 있게 해줍니다, 가변적 단어 너무 어려운데 제가 이해한 바로그냥 상태를 해당 훅으로 관리할수 있습니다 import {useState} from "react" const [현재상태, 변경할상태] = useState('') 대략적으로 사용방법은 위와 같습니다 useState를 임포..