React

코드를 작성하다가 state 값을 변경해줬는데 리랜더링이 한 탬포 늦게 됐었다 🥲하지만 나는야 리액트 초보자 ... 😶‍🌫️ 왜 이런 현상이 발생하는지 검색하다가 리액트 불변성 에 대해 알게 되었다그럼 불변성 너 도대체 뭐니?!Javascript 엔진은 3가지의

그동안은 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다 🥲예를 들면 최상단에 있는 부모의 상태를 자식이 쓰기 위해 아래 컴포넌트로 주고, 아래 컴포넌트로 주고 ...아이고 복잡해 😶‍🌫️ 그러던 와중 오늘 Redux 라는 것

Virtual DOM은 Real DOM의 가벼운 사본과 같다.Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다.DOM은 Document Object Mode

클래스 컴포넌트는 복잡해질수록 이해하기 어려워졌고, 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다는 단점이 있다.또한 React의 클래스 컴포넌트를 사용하기 위해서는 JavaScript의 this 키워드가 어떤 방식으로 동작하는지 알아야 하는데. 이는 문법을 정확히

함수형 컴포넌트는 그냥 함수이다. 함수형 컴포넌트는 단지 jsx를 반환하는 함수이다.컴포넌트가 렌더링 된다는 것은 누군가가 그 컴포넌트(함수)를 호출하여 실행되는 것을 말한다. 함수가 실행될 때 마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시

우선 간단한 예제를 살펴보자.input 창을 통해 숫자를 입력할 경우 페이지의 숫자 항목들이 변경되고, theme 토글 버튼을 누를 경우 css적 요소가 변하도록 하는 예제코드 이다.숫자를 변경해보면 콘솔 창에 '숫자가 변동되었습니다.'라는 메시지를 볼 수 있다.하지만

👊🏻 커스텀 훅(Custom Hooks) : 개발자가 스스로 커스텀한 훅을 의미하며, 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용 할 수 있다. 커스텀 훅 정의할 때 규칙 Custom Hook을 정의할 때는 함수 이름 앞에 use 를 붙이는 것이 규칙이다.