개발하는 무민

Ref란? 리액트에서 DOM 요소나 클래스 컴포넌트의 인스턴스에 직접 접근하기 위한 방법을 제공. 컴포넌트 내부의 특정 DOM 요소에 직접 접근하여, 해당 요소를 조작하거나 해당 요소의 정보를 얻을 수 있다. Ref는 주로 폼 입력 처리, 포커스 관리, 애니메이션 직접 조작 등에 사용한다. 예시 코드 1. forwardRef를 사용하는 방식 컴포넌트를 생성할 때 바로 Ref를 전달할 수 있는 함수이다. props와 Ref 두개의 매개변수를 받는다. 주로 함수 컴포넌트에서 사용되며, 컴포넌트 내부에서 ref를 접근할 수 있게 해준다. → 외부에서 Ref를 통해 내부의 input 요소에 접근이 가능하다. - ref를 사용한 FancyInput 컴포넌트 예시 import React, { forwardRef }..

인턴 업무를 진행하던 도중 컴포넌트끼리 값을 넘기는 작업이 잘 안되어서 store 및 redux에 관련한 개념을 알아야 업무를 진행할 수 있을 것 같아 공부했던 내용의 기록을 위해 정리한다. 리액트에서는 어플리케이션을 만들 때, 기본적으로 하나의 루트 컴포넌트(App.js)에서 상태를 관리한다. 리액트에서는 부모 컴포넌트가 중간자 역할을 한다. (자식들은 부모를 통해서만 대화함) 컴포넌트 끼리 직접 소통도 가능하지만, 그렇게 하면 코드가 꼬이게 된다. (ref를 사용하면 되긴 함) 예를 들어, App에서는 input 값, 이를 변경하는 OnChange 함수, 새 아이템을 생성하는 onCreate 함수 를 props로 Form에게 전달해준다. Form은 해당 함수와 값을 받아서 화면에 보여주고, 변경 이벤..