Library & Framework

Context API 개념과 사용법

Context API 1. 개념 React에서 제공하는 내장 API로서 컴포넌트들에게 동일한 Context(맥락)을 전달하는데 사용할 수 있다. 일반적으로 리액트에서 데이터를 전달하는 기본 원칙은 단방향성이다. 즉, 부모 컴포넌트에서 자식 컴포넌트 방향으로만 데이터를 전달할 수 있다는 의미다. 단방향성은 애플리케이션의 안전성을 높이고 흐름을 단순화하는데 유용하지만 때때로 너무 많은 단계를 거쳐서 자식 컴포넌트에 데이터를 전달해야 한다는 문제점을 야기하기도 한다. 예를들어 5단계 아래에 위치한 자식 컴포넌트에게 데이터를 넘겨야 한다면, 중간에 4개의 컴포넌트는 해당 데이터를 사용하지 않을지라도 props를 계속해서 넘겨줘야하는 문제가 발생한다. 또한, 형제 관계나 특정 범위 안에 있는 컴포넌트들에게 데이터..

useEffect의 Dependency array(의존성 배열)

useEffect의 의존성 배열 useEffect에서 의존성 배열을 다루는 것은 굉장히 중요한 부분 의존성 배열을 제대로 다루지 못한다면 useEffect를 사용하면서 버그가 발생할 확률이 굉장히 높아진다. 1. 의존성 배열이란? 의존성 배열이란 얕게 이해하자면 useEffect에 두번째 인자로 넘기는 배열 그리고 두번째 인자를 넘기지 않으면 Effect는 매번 실행 빈 배열을 넘긴다면 컴포넌트의 첫번째 렌더링 이후에만 실행 이렇게만 이해하고 그동안 useEffect를 사용하고 있었다면 애플리케이션에서 버그가 발생할 확률이 굉장히 높다. useEffect의 시그니쳐는 아래와 같다. useEffect(effect, 의존성) 여기서 effect는 함수의 형태로 표현되고, 의존성은 여러 의존성들을 한번에 전달..

React 렌더링 최적화 & Advanced Hook

1. 렌더링 (Rendering) 1-1. 렌더링이란? 렌더링 - 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미한다. 사실 이 렌더링 과정을 잘 처리해주는 것이 우리가 Vanila JavaScript를 사용하지 않고 React 같은 UI 라이브러리 또는 프레임워크를 사용하는 이유다. 브라우저에서 렌더링 - DOM요소를 계산하고 그려내는 것을 의미한다. HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 결합되고, 위치를 계산하고, 최종적으로 브라우저에 그려진다. 그리고 우리는 브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시킨다. 명령형과 선언형 - Vanila JavaScript를 이용해서 DOM에 직접 접근하고 수정하는 것 ..

클래스형 컴포넌트 vs 함수형 컴포넌트

리액트에서 함수형 컴포넌트를 권장하게 된 이유 리액트는 2가지의 방식으로 컴포넌트를 만든다. 함수형과 클래스형이 그것이다. 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅 (Hook)을 지원하게 되면서 정확히는 함수형 컴포넌트 + 훅(Hook) 의 사용을 권장하고 있다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 가진 반면, 함수형 컴포넌트는 state를 사용하지않고 단순하게 데이터를 받아서 (props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하면서 Logic의 재사용이 가능하다는 장점이 있다. 클래스형 컴포넌트 VS 함수형 컴포넌트 1. 선언 방식이 다르다. - 클래스형 컴포넌트와 함수형 ..