개발/React

useMemo

https://youtu.be/e-CnI8Q5RY4 (상기 영상과 코드스테이츠 유어클래스 내용을 참고하여 공부 내용을 정리합니다.) 1. useMemo 개념 설명 리액트 컴포넌트의 성능 최적화를 위해 사용되는 대표적인 hook들인 useMemo와 useCallback에 대해 알아보자. (useCallback은 별도 문서에 정리) Memoization useMemo의 memo는 memoization을 뜻한다. 메모이제이션이란 어떠한 커다란 문제를 풀 경우에 문제를 중복되는 하위 문제가 있고, 이 하위 문제의 결과를 저장해서 상위의 문제를 해결할 수 있는 경우에 하위 문제의 결괏값을 저장해두어 상위문제를 풀 때 연산횟수를 줄일 수 있는 방법을 말한다. 자세한 내용은 이전에 작성한 동적 프로그래밍 정리 내용을..

[React] Redux 상태관리

1. 상태 관리 라이브러리가 왜 필요할까? Props Drilling 공통된 부모 컴포넌트는 조상인 최상위 컴포넌트 뿐인 공통된 부모 컴포넌트가 없는 2개의 컴포넌트에서 각각 사용되는 상태가 있다고 가정할 때, 기존 리액트 데이터 흐름에 따르면 최상위 컴포넌트에 상태를 위치시키는게 적합하다. 하지만 이런 경우, 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 부모 컴포넌트들도 상태 데이터를 가지며 해당 컴포넌트가 사용하지도 않는 상태인데도 상태를 써야 하는 자식 컴포넌트까지 props를 내려주거나 상태를 끌어올리는 이벤트 드릴링이 일어나야 하므로 데이터 흐름이 복잡해지고 컴포넌트 구조의 변경이 생기는 경우 데이터 흐름을 완전히 바꿔야 할 수도 있는 등 유연하게 대처할 수 없어 매우 비효율적이다. 따라서..

[React] JSX문법

class는 자바스크립트 예약어이므로 태그에 클래스 부여시 className="" 으로 작성. 속성값으로 변수를 넣는것도 가능. 인라인 스타일 적용시 유의사항 2가지 1. 속성 이름은 카멜케이스로 작성 JSX는 자바스크립트 기반이므로 - 같은 기호를 쓰게되면 연산자로 보므로 태그에 인라인 스타일 적용시 font-size 같은 방식으로 쓸 수 없음. fontSize 이렇게 style 속성도 카멜케이스로 입력해야함. 복잡하게 인라인스타일 주지 말고 css는 css파일에 적고 연동하자. 2. 속성은 객체 리터럴 방식으로 작성. { key : value } onClick의 속성값은 반드시 중괄호로 감싼 함수가 들어가야 함. 1. onClick={ function() { 1 + 1 } } // 일반적인 익명함수 ..