React

리액트에서는 State가 변경될 때마다 렌더링이 일어난다.렌더링이 자주 일어나면 웹의 성능에 이슈가 일어날 수 있다.렌더링을 최소화하기 위해 State를 하나로 합쳐보자코드를 살펴보자 함수와 State를 두 번 선언하여 input 값이 변화될 때마다 렌더링이 일어나고

리액트에서 컴포넌트를 선언하는 방식은 두 가지가 있다.클래스형 컴포넌트(class component)함수형 컴포넌트(function component)요즘에는 대부눈 함수형 컴포넌트를 많이 사용하지만, 클래스형 컴포넌트를 만났을 때 해석할 줄 알아야 하기 때문에 클래스

리액트에서 리렌더링이 일어나는 조건은 다음과 같습니다.1) 컴포넌트의 state가 변경되었을 때2) 컴포넌트가 상속받은 props가 변경되었을 때3) 부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링리액트에서 렌더링이 일어나면 UI를 다시 그려주는 작업

어떤 컴포넌트가 Mount(화면에 첫 렌더링) Update(리 렌더링) Unmount(화면에서 사라질 때) 특정 작업을 처리할 코드를 실행시키고 싶으면 useEffect를 사용하면 된다. useEffect는 콜백함수 인자를 받는다. 함수 안에 우리가 원하는 작업을 작

리액트의 useState를 활용해 모달창을 만들어 보자두 개의 모달창을 만들고 1번은 외부영역을 클릭하면 모달창이 닫히게2번은 닫히지 않게 만들어 보자.open modal 버튼 클릭시 state 값을 true로 만들어 모달창을 띄우고 모달 외부영역을 클릭하면 state

불변성: 메모리에 있는 값을 변경할 수 없는 것 (숫자, 문자 등의 데이터 vs 배열, 객체 함수 등) 숫자, 문자 등의 데이터는 원시데이터 라고 합니다. 원시데이터가 아닌 배열, 객체 함수 등은 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바

리덕스 툴킷은 리덕스를 좀 더 짧은 코드와 사용하기 쉽게 개량한 버전으로줄여서 RTK 라고도 합니다.리덕스와 구조나 전체적인 흐름은 똑같고 컴포넌트에서 useSelector를 통해사용하는 것 모두 같습니다. 더하기, 빼기의 state를 렌더링하는 예제들 통해리덕스와 리