ASAC 웹풀스택 Context API + useReducer 를 활용하여 전역 상태로 관리되는 Modal 제작
[ASAC 웹풀스택] Context API + useReducer 를 활용하여 전역 상태로 관리되는 Modal 제작
개념파악하기,
Context API
Context API는 React 애플리케이션 내에서 전역적인 데이터를 공유하기 위한 메커니즘입니다. 이를 통해 중간 컴포넌트를 거치지 않고도 데이터를 전달할 수 있습니다.
useReducer Hook
useReducer는 복잡한 상태 로직을 관리하기 위한 React Hook입니다. 컴포넌트의 상태 관련 로직을 분리하고, 액션을 통해 상태를 변경하는 방식으로 작동합니다.
조건부 렌더링
조건부 렌더링은 특정 조건에 따라 컴포넌트나 요소를 렌더링하거나 렌더링하지 않는 것을 의미합니다. 이를 활용하여 상황에 따라 다른 내용을 화면에 표시할 수 있습니다.
[ASAC 웹풀스택] import React, { createContext, useState, useContext } from 'react'; 이해를 돕는 예시,
import React, { createContext, useState, useContext } from 'react';
contextExample.js:
import React, { createContext, useState, useContext } from 'react';
// 새 Context 생성
const MyContext = createContext();
function App() {
// useState Hook을 사용하여 state 생성
const [value, setValue] = useState("Hello World");
return (
// Provider component로 자식 components에 value 제공
<MyContext.Provider value={value}>
<div>
{/* App component 내부에서 ChildComponent 렌더링 */}
<ChildComponent />
</div>
</MyContext.Provider>
);
}
function ChildComponent() {
return (
<div>
{/* ChildComponent 내부에서 GrandChildComponent 렌더링 */}
<GrandChildComponent />
</div>
);
}
function GrandChildComponent() {
// useContext Hook을 사용하여 MyContext의 value 가져오기
const value = useContext(MyContext);
return (
// 가져온 value 출력
<div>{value}</div> // "Hello World" 출력
);
}
export default App;
App.js:
import React from 'react';
import './App.css';
import contextExample from './contextExample';
function App() {
return (
<div className="App">
{/* contextExample 컴포넌트 렌더링 */}
<contextExample />
</div>
);
}
export default App;
[ASAC 웹풀스택] .focus() 를 .current.focus()로 많이 쓰인다.
메서드는 DOM 요소에 초점을 맞추는 메서드입니다. 이 메서드를 호출하면 해당 요소가 화면에서 강조되거나 입력을 받을 준비가 되는 것을 의미합니다. 주로 입력 필드나 버튼 등의 요소에 사용됩니다.
passwordRef.current.focus()
passwordRef.current.focus()는 React에서 Refs와 DOM을 다루는 방법에 대한 코드입니다. 이 코드를 하나하나 살펴보겠습니다.
passwordRef: 이것은 React의 ref 객체를 참조하는 변수입니다. Refs는 React에서 DOM 요소에 접근할 수 있게 해주는 메커니즘입니다.
.current: current 프로퍼티는 ref 객체가 참조하는 DOM 요소를 가리킵니다.
.focus(): focus() 메서드는 JavaScript에서 제공하는 기본 DOM API 중 하나로, 해당 요소에 포커스를 주는 역할을 합니다.
따라서, passwordRef.current.focus()라는 코드 전체의 의미는 "React ref 객체인 passwordRef가 참조하고 있는 실제 DOM 요소에 포커스를 준다" 입니다.
use.ref 예제코드
import React, { useRef } from 'react';
function App() {
// useRef Hook을 사용하여 passwordInput이라는 이름의 ref 생성
const passwordInput = useRef();
const handleClick = () => {
// 버튼 클릭 시 passwordInput이 참조하는 실제 input element에 focus 주기
passwordInput.current.focus();
};
return (
<div>
{/* 생성한 ref를 input element의 ref prop에 연결 */}
<input type="password" ref={passwordInput} />
<button onClick={handleClick}>Focus the input</button>
</div>
);
}
export default App;
DOM 요소에 포커스를 준다" 입니다.
"DOM 요소에 포커스를 주다"라는 표현은 해당 DOM 요소(예: 입력 필드)를 활성화하고 사용자의 입력을 받을 수 있도록 만든다는 뜻입니다. 예를 들어, 텍스트 입력 필드에 포커스가 주어지면, 사용자가 키보드를 이용해 문자를 입력할 수 있게 됩니다.
React에서는 ref라는 개념을 사용하여 DOM 요소에 직접 접근할 수 있습니다. ref는 "참조(reference)"의 줄임말로, React 컴포넌트 내부의 특정 인스턴스나 DOM 요소를 참조할 수 있는 방법을 제공합니다.
[ASAC 웹풀스택] [] 와 {} 연결에 대한 상세한 설명
const [count, setCount] = useState(0);
이 코드에서 useState(0)은 [0, f]라는 배열을 반환합니다. 여기서 0은 초기 상태값이고, f는 상태 변경 함수입니다. 이 배열을 [count, setCount]라는 변수로 받아서 count에는 상태값이 들어가고, setCount에는 상태 변경 함수가 들어갑니다.
[]는 배열 리터럴이라고 부르는 표기법입니다. 배열은 여러 개의 값을 순서대로 저장할 수 있는 자료구조입니다. 배열의 각 요소는 인덱스라는 번호로 구분됩니다. 예를 들어, [1, 2, 3]은 1, 2, 3이라는 세 개의 값을 저장하는 배열입니다. 이 배열의 첫 번째 요소는 인덱스 0에 위치하고, 값은 1입니다. 두 번째 요소는 인덱스 1에 위치하고, 값은 2입니다. 세 번째 요소는 인덱스 2에 위치하고, 값은 3입니다.
{}는 객체 리터럴이라고 부르는 표기법입니다. 객체는 키와 값의 쌍으로 이루어진 속성들을 저장할 수 있는 자료구조입니다. 객체의 각 속성은 키라는 이름으로 구분됩니다. 예를 들어, {name: “React”, version: “17.0.2”}은 name과 version이라는 두 개의 속성을 저장하는 객체입니다. 이 객체의 name 속성의 키는 "name"이고, 값은 "React"입니다. version 속성의 키는 "version"이고, 값은 "17.0.2"입니다.
[]와 {}를 연결하는 것은 배열 안에 객체를 넣거나, 객체 안에 배열을 넣는 것을 의미합니다. 예를 들어, [{name: “React”, version: “17.0.2”}, {name: “Vue”, version: “3.2.26”}]은 두 개의 객체를 요소로 가지는 배열입니다. 이 배열의 첫 번째 요소는 인덱스 0에 위치하고, 값은 {name: “React”, version: “17.0.2”}인 객체입니다. 두 번째 요소는 인덱스 1에 위치하고, 값은 {name: “Vue”, version: “3.2.26”}인 객체입니다.
{count: [1, 2, 3], setCount: [4, 5, 6]}은 두 개의 배열을 값으로 가지는 객체입니다. 이 객체의 count 속성의 키는 "count"이고, 값은 [1, 2, 3]인 배열입니다. setCount 속성의 키는 "setCount"이고, 값은 [4, 5, 6]인 배열입니다.
[]와 {}를 연결하는 이유는 다양한 형태의 데이터를 표현하고 조작하기 위해서입니다. 예를 들어, useState 훅은 상태와 상태 변경 함수를 반환하는데, 이를 배열로 받아서 각각의 변수에 할당할 수 있습니다.
[ASAC 웹풀스택] 구조 분해 할당 문법([])
[ASAC 웹풀스택] 구조 분해 할당 문법([])
// 배열 선언
const arr = [1, 2, 3];
// 구조 분해 할당 문법([])을 사용하여 배열의 각 요소를 다른 변수에 할당
// arr[0]은 a에, arr[1]은 b에, arr[2]는 c에 할당됨
const [a, b, c] = arr;
// 변수 출력
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
const [a, b, c] = arr; 부분이 바로 구조 분해 할당입니다. 이 코드 한 줄로 인해 arr 배열의 첫 번째 요소가 a라는 변수에 저장되고(a는 1), 두 번째 요소가 b라는 변수에 저장되며(b는 2), 마지막으로 세 번째 요소가 c라는 변수에 저장됩니다(c는 3).
그 결과 콘솔 출력에서 각각의 숫자(1, 2, 3)가 차례대로 출력됩니다.
따라서 "배열을 만들고 콘솔을 찍어보자"와 같은 과정이지만 중간 과정에서 복잡한 인덱싱 작업 없이도 각각의 값을 편리하게 추출할 수 있습니다. 이런 식으로 구조 분해 할당은 코드를 더욱 간결하고 가독성 좋게 만들어주며 특히 크기가 크거나 복잡한 데이터 구조에서 유용합니다.
[ASAC 웹풀스택] React Hook의 기본적 개념도
import React, { useState } from 'react';
function Counter() {
// useState 호출하여 count와 setCount 변수 생성
// useState의 인자로 전달된 값(0)은 count의 초기값으로 설정됨
const [count, setCount] = useState(0);
return (
<div>
{/* 현재 count 값 출력 */}
Count: {count}
{/* 버튼 클릭 시 count 값 증가 */}
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
export default Counter;
댓글