React - useRef https://www.daleseo.com/react-hooks-use-ref/ React Hooks: useRef 사용법 Engineering Blog by Dale Seo www.daleseo.com (해당 글은 위 블로그를 참조하였습니다.) 이번 글에서는 리액트에서 특정 상황에서 사용하는 유용한 함수 훅인 useRef에 대해서 소개하려고 한다. useRef는 인자를 넣어 정의하면 current 값을 가진 객체를 반환하게 되는데 이 current 값에 인자가 들어가게 된다. 보편적으로 useRef를 사용하는 상황은 3가지로 나뉜다. 1. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 2. 애니메이션을 직접적으로 실행시킬 때 3. 서드 파티 DOM 라이브러리를 R..

State 끌어올리기(React 공식문서) https://ko.reactjs.org/docs/lifting-state-up.html State 끌어올리기 – React A JavaScript library for building user interfaces ko.reactjs.org 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다. React 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는 "진리의 원천(source of truth)"를 하나만 두어야 한다. 이 말은 곧 동일한 데이터에 대한 state는 한 곳에서 폭포처럼 내려가는 방법이 좋은 방법이라는 뜻이다. 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력..

React - 합성(React 공식문서) https://ko.reactjs.org/docs/composition-vs-inheritance.html 합성 (Composition) vs 상속 (Inheritance) – React A JavaScript library for building user interfaces ko.reactjs.org 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있다. 범용적인 '박스' 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 자주 볼 수 있다. function FancyBorder(props) { return ( {props.children} ); } function WelcomeDialog() { return ( Wel..

React - useEffect, useCallback udemy 리액트 강의에서 학습한 내용을 정리하고자 쓴다. 우선 useEffect 개념을 보면 이는 리액트에서 제공하는 훅인데 리액트 내부적으로 UI를 직접 변화시키는 로직이 아닌 부분을 대부분 이곳에 정의한다. 이를 side-effect라고 부르는데 부작용이라는 뜻은 아니고 사이드에서 일어나는 이펙트 정도로 생각하면 될 것 같다. 그럼 useEffect를 왜 쓸까? 첫 번째로 앞서말한 UI를 변화시키는 로직이 아닌 경우 정확하게 분리시키기 위해서가 첫 번째 이유이고, 두 번째로는 dependencies가 존재하지 않을 떄 이는 처음 시작할 때 한번만 이팩트 효과를 줄 수 있기 때문이다. 두 번째 이유에서 살펴보면 사이트에 들어가자마자 api를 통해..