반응형 프론트엔드/리액트14 [React] 8장: Hooks 심화 - React 능력 끌어올리기 8장: Hooks 심화 - React 능력 끌어올리기useState와 useEffect 외에, React는 더 다양하고 강력한 Hook들을 제공합니다. 복잡한 상태 로직을 관리하거나, 불필요한 렌더링을 방지하여 성능을 최적화하는 등 고급 기능을 다루는 Hook들을 배웁니다.1. 핵심 개념useContext: "Props drilling" 문제를 해결하기 위한 Hook입니다. Props drilling이란, 여러 단계의 중첩된 컴포넌트를 거쳐 데이터를 전달하는 것을 말합니다. useContext를 사용하면, 상위 컴포넌트에서 제공한 데이터를 트리 깊숙한 곳의 하위 컴포넌트에서 props 없이 직접 가져다 쓸 수 있습니다. (예: 테마, 언어 설정, 사용자 인증 정보 등 전역적인 데이터)useReducer:.. 2025. 9. 16. [React] 7장: 폼 다루기 - 사용자의 입력 받기 7장: 폼 다루기 - 사용자의 입력 받기사용자로부터 텍스트, 선택, 파일 등 다양한 입력을 받기 위한 폼(Form)을 다루는 방법을 배웁니다. React에서는 폼 엘리먼트의 값을 컴포넌트의 state로 관리하는 제어 컴포넌트(Controlled Component) 방식을 권장합니다.1. 핵심 개념제어 컴포넌트(Controlled Component):폼 데이터(예: 의 값)를 React 컴포넌트의 state를 통해 관리하는 방식입니다.사용자가 입력할 때마다 state가 업데이트되고, 이 state 값이 다시 폼 엘리먼트의 value로 전달됩니다.데이터의 흐름이 단방향(state -> UI, UI event -> state update)으로 명확해져서, 입력 값에 대한 검증, 조작, 다른 UI 요소와의 연동.. 2025. 9. 16. [React] 6장: 리스트와 Key - 동적인 목록 만들기 6장: 리스트와 Key - 동적인 목록 만들기배열 데이터를 UI에 동적으로 렌더링하는 방법을 배웁니다. React가 리스트의 변경 사항을 효율적으로 추적하고 업데이트하는 데 필요한 key prop의 중요성을 이해합니다.1. 핵심 개념map() 함수: JavaScript 배열의 내장 함수로, 배열의 각 요소를 순회하며 새로운 배열을 만듭니다. React에서는 이 map() 함수를 사용하여 데이터 배열을 엘리먼트 배열로 변환합니다.Key: 리스트의 각 엘리먼트에 부여해야 하는 고유하고 안정적인 문자열 속성입니다.왜 필요한가?: React는 key를 사용하여 리스트의 어떤 항목이 변경, 추가, 또는 제거되었는지 식별합니다. key가 없으면 React는 리스트가 변경될 때마다 전체 리스트를 파괴하고 새로 만드는.. 2025. 9. 16. [React] 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기조건부 렌더링은 특정 조건에 따라 다른 컴포넌트나 엘리먼트를 렌더링하는 기법입니다. 사용자의 로그인 상태, 데이터 로딩 여부, 권한 등 다양한 상황에 맞춰 동적인 UI를 만들 수 있습니다.1. 핵심 개념 및 기법if 문 사용하기: 가장 기본적인 방법입니다. 컴포넌트의 렌더링 로직이 복잡할 때, return 문 이전에 if 문을 사용하여 조건에 따라 다른 JSX를 반환할 수 있습니다.삼항 연산자 (Ternary Operator): condition ? expressionIfTrue : expressionIfFalseJSX 내부에서 간단한 조건부 렌더링을 처리할 때 매우 유용합니다. 한 줄로 깔끔하게 표현할 수 있습니다.논리 연산자 && (AND): cond.. 2025. 9. 16. [React] 4장: 이벤트 핸들링 - 사용자와의 상호작용 4장: 이벤트 핸들링 - 사용자와의 상호작용사용자의 클릭, 입력, 마우스 움직임 등 다양한 행동에 반응하는 방법을 배웁니다. React의 이벤트 시스템은 웹 표준과 유사하지만 몇 가지 차이점이 있습니다.1. 핵심 개념이벤트 핸들러(Event Handler): 특정 이벤트가 발생했을 때 실행되는 함수입니다.이벤트 바인딩: JSX 엘리먼트에 이벤트 핸들러 함수를 연결하는 과정입니다.React 이벤트 시스템의 특징:카멜 케이스(camelCase): 이벤트 이름은 onclick, onmouseover 대신 onClick, onMouseOver와 같이 카멜 케이스를 사용합니다.함수 전달: HTML에서는 문자열 형태로 코드를 전달하지만(onclick="alert('hello')"), React에서는 함수 자체를 전.. 2025. 9. 16. [React] 3장: State와 생명주기 - 살아 움직이는 컴포넌트 3장: State와 생명주기 - 살아 움직이는 컴포넌트State는 컴포넌트가 스스로 관리하는 내부 데이터입니다. 사용자의 상호작용 등으로 State가 변경되면, React는 컴포넌트를 다시 렌더링하여 화면을 업데이트합니다. 컴포넌트의 '생명'과도 같은 State와 생명주기를 다루는 방법을 배웁니다.1. 핵심 개념State: 컴포넌트의 "상태"를 나타내는 데이터입니다. Props가 부모로부터 받은 '외적인' 데이터라면, State는 컴포넌트가 자체적으로 생성하고 관리하는 '내적인' 데이터입니다.useState Hook: 함수형 컴포넌트에서 State를 사용할 수 있게 해주는 Hook(훅)입니다.const [state, setState] = useState(initialValue); 형태로 사용합니다.sta.. 2025. 9. 16. 이전 1 2 3 다음 반응형