이재호

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

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

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

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

리액트에서 컴포넌트를 작성하는 방법에는 크게 2가지가 있다 클래스와 함수이다 클래스 문법은 자바스크립트와 비슷하다 여전히 클래스는 낯설고 어렵다 import React from 'react' class App extends Componts { render(){ return( 클래스형 컴포넌트 ) } }함수형은 클래스보다 정말 보기 쉽고 간결하다 import React from 'react' const app = () => { return( 함수형 컴포넌트 ) } 데이터의 상태를 관리할때 state(상태)를 사용하는데 클래스와 함수형에 그 차이가 있다 import React from 'react' class App extends Componts { constroc..

리액트 쿼리를 배워야해서 강의를 찾던중 해외유튜버 강의를 찾아서 씐나게 배우면서 따라 코딩을 치고 있었다 db.json도 만들고~ json-server를 설치도해서 서버환경을 만들어주고 axios 설치까지함 이제 드디어..!! 가상의 json-server 로컬주소까지 get 으로 받아오는거까지 코드작성 마무리했는데 염병 .. 네트워크 오류가 뜬거임... fucking 도대체 뭐가 문제인건지 열심히 구글링을 함... 내가 패키지 다운을 안한게 있나... npm 으로 이것저것 설치도 해보고... 별 짓을 다하면서 삽질을 하기 시작했음... 나의 소중한 시간.. 그러다 한줄기의 빛을 발견함... 나랑 비슷한 증상을 겪은 다른 블로거도 있는거임 그리고 해결하는 방법을 적어주심 .. ㅠㅠ 갬동.. 문제를 해결했던..