React

react에서 key값이 변하는경우, 조건부렌더링의 경우 컴포넌트는 Mount, umMount과정을 거친다.mount시에 새로 엘리먼트를 그리기 떄문에 개발자툴에서 해당 엘리먼트를 찍어보면 div가 펼쳐졌다가 감춰졌다한다.

Class형 컴포넌트에서의 componentDidMount, componentDidUpdate componentWillUnmount의 기능을 하나로 묶은 Hooks이다여기서 리액트의 라이프사이클을 이해하는게 매우중요하다한가지 겪었던 문제인데 아래코드를 실행해보면 엄청난

프로젝트 단위가 커진다면 useState만으로 상태관리가 힘들어진다. 컴포넌트가 A->B->C->D->E 구조일때 A->E로 props를 보내려면 B,C,D를 모두 거쳐야 하기 때문이다. 이를 효율적으로 관리하기 위한 Hooks를 알아보자 요약부터 하자면, create

useState가 무엇인지는 알지만, 동작원리에 대해서 좀더 깊게 고촬해봤다useState는 보통 아래처럼 구조분해(distrcuturing) 형식으로 선언한다. 이는 아래 예시처럼 두개의 쌍 형태로 state(==fruit), setState(==setFruit)형식

React에서 상태값의 불변성을 지키기위해 ...arr, item 이런식으로 spread Operator를 사용한다.단순히 그렇구나 하고 넘어갔는데, 원리가 궁금해서 공부한 내용을 정리해봤다우선 react에서는 state, props가 변경되거나 부모컴포넌트가 렌더링

리액트에서 라이프사이클을 이해하는것이 중요한거같다. 컴포넌트가 생기기 직전, 생긴직후, 사라기전 등 여러가지 상황을 이해하기위해 공부해보자.// 최초 화면렌더링시1\. constructor1\. componentWillMount 이제 안쓰임 쓰지마세요2\. render

프로젝트를 만드는중 무수히 많아지는 state들을 매번 자식으로 넘겨주는 과정이 매우 번거롭게 느껴졌다. 그래서 많이 사용하는 redux를 공부해보자초기 상태값 지정reducer에서 초기 상태값을 받고, action을 지정해준다(switch문 사용)action을 지정

redux를 공부중에 추가로 사용하게되는 미들웨어 2가지를 알아봤다.조금 어려운 개념인거같아서 대강 정리해두고 실무에서 필요할때 다시 꺼내보려한다 react컴포넌트는 상태에 따른 화면을 정의하는것이 기본 목적이다.redux만 사용해서는 비즈니스로직이 컴포넌트내에 섞이는

redux를 사용하면서 서브페이지에서 새로고침시 글로벌상태값이 날라가는 경우가 생겼다. 이를 해결하기위해 글로벌상태값을 localStroge | sesstionStorage에 저장하는 redux-persist를 알아보자persistConfig를 작성하여 persis

그저 input의 .focus()기능을 사용하기위해 쓰던 useRef에 대해 깊게 공부해보자인자로 넘어온 초기값을 .current 프로퍼티에 저장한다따라서 .current안의 값이 바뀌어도 useRef자체가 바뀌는게 아니라서 재랜더링이 일어나지 않는다.useRef안에

react.js의 라이브러리인 next.js에 대해 간단히 정리해보자 Next.js란? react.js기반의 라이브러리고 서버사이드렌더링, SEO에 강점을 보인다

react-router-dom의 새로운버전인 V6의 전반적인 내용을 정리해보자BrowserRouter > Routes > Route 구조이고, 이전버전보다 명확하게 동적라우팅구현이 가능하다. 또한 element속성으로 컴포넌트를 렌더링해주도록 바뀌었다만약 아래와같이 동

코드스플릿이 뭔가? 그냥 지나쳤던 내용인데 한번 알아보자일반적으로 lazy를 사용하지않고 home/ktw로 라우팅을 하게되면 아래 그림과같이 모든 파일을 리로딩한다.하지만, React.lazy()를 사용하면

useEffect를 쓰면 의존배열에 data값을 넣어주어도, 최초렌더링(mount시) + data가 변할시 리렌더링이 된다.나는 최초 렌더링시와 data가 변할시를 구분해주고싶었는데, useRef를 이용하여 렌더 전후를 구분하는 방법을 알아보자useRef의 curren

react-query에 대해 공부해보자react-query는 서버의 값을 가져오거나, 캐싱, 값 업데이트, 에러핸들링과 같은 비동기작업을 편리하게 도와준다.캐싱 핸들링fetch 데이터에 대해 update를 하면 자동으로 fetch를 시행한다데이터가 오래 되었다고 판단되

Next.js 공부를 하기앞서, Next.js가 어떤식으로 동작하는지 알아보자 Next 서버로 요청이 들어오면 Next서버에서 요청이 들어온 페이지에 들어갈 데이터를 Fetch하고 (서버측에서 Fetch를 한다는점이 기존과 다르다) Html을 구성하여 Client로 보

리액트에서 useEffect의 의존배열로 아무리 삽질을 해도 몰랐던부분인데 알게되어 정리해보자onFocus : 태그에 onFocus 프로퍼티를 사용하여 onClick처럼 사용가능.Ref.current.addEventListener("focus", () => {}) :

useEffect에서 특정 target에 blur Event를 걸었는데, 적용되지않았던 경험을 적어보자useEffect는 실행이 되는데 pwRef에서 blur시 이벤트가 일어나지않는다.useEffect의 의존배열을 비워두면 InputComponent가 mount되기전에

로그인이후에 기존에 보던 페이지로 이동하기위해 router history를 저장하는법에 대해 알아보자useEffect안에서 router.event.on 와 router.event.off를 통해 router가 변할때 마다 실행되는routeChangeComplete 이벤트

env파일에 대해 간략히 정리.env.env.development.env.production.env.test.env.local : 가장 우선순위가 높음. 다른 파일들을 override한다REACT_APP\_ 라는 접두어를 사용NEXT_PUBLIC\_ 라는 접두어를 사용

react 작업중 매번 반복되는 패턴을 마주한다.data fetch후 useEffect에서 setState를 해준뒤, 화면에 data를 그려주고..data.length < 1인 경우 loading상태를 띄워주는등.. 이를 고차함수로 묶는 react 패턴에 대해 정

React v18의 Suspense 기능에 대해 알아보자Suspense : 미결,미결정useState(data, isLoading)과 useEffect에서 data fetch를 활용ChildComponent의 fetch가 끝나고 GrandChildComponent의 f

쉬어가는 느낌으로 react18의 새로운 hook인 useId를 알아보자 react에서 uniqId를 생성해주는 hook인데 아래처럼 중복된 id를 사용하면 안될때 사용하기 좋다. :r0, :r1 이런 형태의 id가 생성되는걸 볼수있다. 단, key에 해당 ho

업무를 하다보면 setState(state + 1)과 setState(prev => prev + 1)의 차이점에 대해 느끼게 되었는데, 문득 useState의 내부 구조와 동작원리에 대해 궁금해 깊게 공부해보고자 한다.useState가 return하는 배열의 첫번째 인