전체 글 (105) 썸네일형 리스트형 [ React ] React 학습하기 : 탈출구 ( Ref로 값 참조하기 ) 훑어보기컴포넌트가 일부 정보를 “기억”하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하려면 Ref를 사용하세요.학습 내용컴포넌트 Ref를 어떻게 추가하는가Ref의 값이 어덯게 업데이트되는가Ref가 State와 어떻게 다른가Ref를 어떻게 안전하게 사용할까컴포넌트에 Ref를 추가하기React에서 useRef Hook을 가져와 컴포넌트에 Ref를 추가할 수 있습니다.import { useRef } from 'react';컴포넌트 내에서 useRef Hook을 호출하고 참조할 초깃값을 유일한 인자로 전달합니다. 예를 들어 다음은 값 0에 대한 Ref입니다.const ref = useRef(0);useRef는 다음과 같은 객체를 반환{ current: 0 // useRef에 전달한 값}ref.curr.. [ React ] React 학습하기 : State 관리하기 ( Reducer와 Context로 앱 확장하기 ) 훑어보기Reducer를 사용하면 컴포넌트의 state 업데이트 로직을 통합할 수 있습니다. Context를 사용하면 다른 컴포넌트들에 정보를 전달할 수 있습니다. Reducer와 context를 함께 사용하여 복잡한 화면의 state를 관리할 수 있습니다.학습 내용reducer와 context를 결합하는 방법state와 dispatch 함수를 prop으로 전달하지 않는 방법context와 state 로직을 별도의 파일에서 관리하는 방버Redcuer와 context를 결합하기Reducer의 개요의 예시에서 reducer로 state를 관리하는 방법을 알아보았습니다. 해당 예시에서 state 업데이트 로직을 모두 포함하는 reducer 함수를 App.js 파일의 맨 아래에 선언했습니다.Reducer는 이벤트.. [ React ] React 학습하기 : State 관리하기 ( Context를 사용해 데이터를 깊게 전달하기 ) 훑어보기보통의 경우 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달합니다. 그러나 중간에 많은 컴포넌트를 거쳐야 하거나, 애플리케이션의 많은 컴포넌트에서 동일한 정보가 필요한 경우에는 props를 전달하는 것이 번거롭고 불편할 수 있습니다. Context는 부모 컴포넌트가 트리 아래에 있는 모든 컴포넌트에 깊이에 상관없이 정보를 명시적으로 props를 통해 전달하지 않고도 사용할 수 있게 해줍니다.학습 내용“Prop drilling” 이란?Context로 반복적인 prop 전달 대체하기Context의 일반적인 사용 사례Context의 일반적인 대안Props 전달하기의 문제점Props 전달하기는 UI 트리를 통해 해당 데이터를 사용하는 컴포넌트에 명시적으로 데이터를 전달하는 훌륭한 방법입니.. [ React ] React 학습하기 : State 관리하기 ( State 로직을 reducer로 작성하기 ) 훑어보기한 컴포넌트에서 state 업데이트가 여러 이벤트 핸들러로 분산되는 경우가 있습니다.이 경우 컴포넌트를 관리하기 어려워집니다. 따라서, 문제 해결을 위해 state를 업데이트하는 모든 로직을 reducer를 사용해 컴포넌트 외부의 단일 함수로 통합해 관리할 수 있습니다.학습 내용reducer 함수란 무엇인가?useState에서useReducer로 리팩토링 하는 방법reducer를 언제 사용할 수 있는지reducer를 잘 작성하는 방법reducer를 사용하여 state 로직 통합하기컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 다양한 경우를 한눈에 파악하기 어려워질 수 있습니다. 예를 들어, 아래의 TaskApp 컴포넌트는 state에 tasks 배열을 보유하고 있으며, 세 가지의 이벤트.. [ React ] React 학습하기 : State 관리하기 ( State를 보존하고 초기화하기 ) 훑어보기각 컴포넌트는 독립된 state를 가집니다. React는 UI 트리에서의 위치를 통해 각 state가 어떤 컴포넌트에 속하는지 추적합니다. 리렌더링마다 언제 state를 보존하고 또 state를 초기화할지 컨트롤할 수 있습니다.학습 내용React가 언제 state를 보존하고 언제 초기화하는지어떻게 React가 컴포넌트의 state를 초기화하도록 강제할 수 있는지key와 타입이 state 보존에 어떻게 영향을 주는지State 는 렌더트리의 위치에 연결 됩니다.컴포넌트에 state를 줄 때 state가 컴포넌트 안에 “살고” 있다고 생각할 수도 있습니다. 하지만 사실 state는 React 안에 있습니다. React는 컴포넌트가 UI 트리에 있는 위치를 이용해 React가 가지고 있는 각 state를.. [ React ] React 학습하기 : State 관리하기 ( 컴포넌트 간 State 공유하기 ) 훑어보기때때로 두 컴포넌트의 state가 항상 함께 변경되기를 원할 수 있습니다. 그렇게 하려면 각 컴포넌트에서 state를 제거하고 가장 가까운 공통 부모 컴포넌트로 옮긴 후 props로 전달해야 합니다. 이 방법을 State 끌어올리기라고 하며 React 코드를 작성할 때 가장 흔히 하는 일 중 하나입니다.학습 내용State 끌어올리기를 통해 컴포넌트 간 state를 공유하는 방법제어 컴포넌트와 비제어 컴포넌트State 끌어올리기 예시예시에서는 부모 컴포넌트인 Accordion이 두 개의 Panel을 렌더링합니다.AccordionPanelPanel각 Panel 컴포넌트는 콘텐츠 표시 여부를 결정하는 Boolean형 isActive 상태를 가집니다.각 패널의 Show 버튼을 눌러봅시다.한 패널의 버튼을.. [ React ] React 학습하기 : State 관리하기 ( State 구조 선택하기 ) 훑어보기State를 잘 구조화하면 수정과 디버깅이 즐거운 컴포넌트와 지속적인 버그의 원인이 되는 컴포넌트의 차이를 만들 수 있습니다. 다음은 state를 구조화할 때 고려해야 할 몇 가지 팁입니다.학습 내용단일 vs 다중 state 변수를 사용하는 경우State를 구성할 때 피해야 할 사항상태 구조의 일반적인 문제를 해결하는 방법State 구조화 원칙상태를 갖는 구성요소를 작성할 때, 사용할 state 변수의 수와 데이터의 형태를 선택해야 합니다. 최적이 아닌 state 구조에서도 올바른 프로그램을 작성할 수 있지만, 더 나은 선택을 할 수 있는 몇 가지 원칙이 있습니다.연관된 state 그룹화하기. 두 개 이상의 state 변수를 항상 동시에 업데이트한다면, 단일 state 변수로 병합하는 것을 고려하.. [ React ] React 학습하기 : State 관리하기 ( State를 사용해 Input 다루기 ) 훑어보기React는 선언적인 방식으로 UI를 조작합니다. 개별적인 UI를 직접 조작하는 것 대신에 컴포넌트 내부에 여러 state를 묘사하고 사용자의 입력에 따라 state를 변경합니다. 이는 디자이너가 UI를 바라보는 방식과 비슷합니다.학습 내용명령형 UI 프로그래밍이 아닌 선언형 UI 프로그래밍을 하는 방법컴포넌트에 들어갈 수 있는 다양한 시각적 state를 열거하는 방법코드에서 다른 시각적 state 간의 변경을 트리거 하는 방법선언형 UI와 명령형 UI 비교UI 상호작용을 디자인할 때 사용자가 액션을 하면 어떻게 UI를 변경 해야 할지 고민해본 적이 있을 것입니다. 사용자가 폼을 제출한다고 생각해봅시다.폼에 무언가를 입력하면 “제출” 버튼이 활성화될 것입니다.”제출” 버튼을 누르면 폼과 버튼이 비.. 이전 1 2 3 4 ··· 14 다음