You don't know React

리액트는 어떻게 객체들을 비교할까요?다음 코드의 결과는 어떻게 될까요?다음과 같은 결과가 나타나는 이유가 무엇일까요?일단 함수 컴포넌트는 리렌더링 될 때마다 항상 함수가 전체가 실행된다는 것을 염두에 두고 생각을 해보면 좋을 것 같습니다.Component 함수가 첫번째

다음과 같이 실행됩니다.useEffect를 제외한 함수내 요소들이 실행 됩니다.componentDidMount는 자식 컴포넌트에서 먼저 발생하고componentWillUnmount는 부모 컴포넌에서 먼저 발생합니다.저번 포스트와 다른게 이번 포스트는 순수한 궁금증에 의

위의 영상을 보고 나도 한번 만들어 보고 싶다는 생각이 들어서 시작하였습니다(?) 하지만 생각보다 내가 모르는 부분이 많아서 모르는 부분을 천천히 익혀가면서 실습을 해보도록 하겠습니다.컴파운드 컴포넌트는 컴포넌트 패턴의 일종이라고 할 수 있습니다. 내부에서는 데이터를

Selection 만들어 보기 오늘은 흔히 dropdown을 만들어보았습니다. 하지만 dropdown뿐만이 아니라 유사한 다른 컴포넌트도 구현할 수 있는 재사용성 높은 컴포넌트를 목표로 Selection이라는 컴포넌트를 만들어 보았습니다. Dropdown과 유사한 구

React 레퍼런스는 useRef를 다음과 같이 정의 하고 있습니다.useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.그럼 다음과

React가 어떻게 동작하는지에 대해서 막연하게나마 알고 있었지만 정확히 어떤 과정을 거쳐서 동작하는지에 대해 한번 알아 보겠습니다.CRA를 통해 React 프로젝트를 생성한 후 생기는 index.js를 한 번 보겠습니다.React의 기본적인 동작은 ReactDom.c

Javascript를 배우다 보면 closure를 배우게 되는데 막상 배우면 어떻게 사용해야 할지 어디에 사용되는지에 대해 감이 잘 안오게 됩니다. 그래서 우리가 흔히 사용하는 useState를 통해서 어떤 식으로 사용 될 수 있는지 한 번 알아보겠습니다.이런 식으로

이 글은 평소와 같이 유튜브를 보다가 굉장히 도움 될만한 정보라고 생각해서 소개할겸 저 스스로도 리마인드 할겸 블로그에 저장해두려고 합니다. 이 글의 주제는 제목과 같이 useEffect를 사용할 때에 쉬이 간과할 수 있는 부분을 소개합니다.혹시라도 저의 글이 아닌 원

저번 포스팅에 이어서 계속해서 useEffect에 대해 알아 보겠습니다.이번 포스팅의 주제는 cleanUp입니다.다음과 같이 useEffect를 사용해서 1초에 1씩 늘어나게 만들었습니다. 그럼 무엇이 문제일까요? 정답은 이 컴포넌트를 마운트 할때마다 setInterv