0. Hooks 함수형 컴포넌트: state 사용 불가 / Lifecycle에 따른 기능 구현 불가 / Hooks 클래스 컴포넌트: 생성자에서 state를 정의 / setState() 함수를 통해 state 업데이트 / Lifecycle methods 제공 Hooks: 리액트 v16.8에 새로 도입된 기능으로 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. (실습을 진행하기 위해 Create React App으로 새로운 앱을 생성한다.) 1. useState 가장 기본적인 Hook, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용한다. 1. useState 이용해서 숫자..

23-24/React.js 2 2023. 11. 24. 10:00

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. useState 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. useState는 코드 상단에서 import 구문을 통해 불러오고, 다음과 같이 사용합니다. const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 위의 코드에서는 0을 넣어 주었는데, 이는 카운터의 기본값을 0으로 설정하겠다는 의미입니다. 이 함수가 호출..

23-24/React.js 1 2023. 11. 24. 10:00

Hook Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. useState 가장 기본적인 Hook으로, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. 📌사용법 const [변수명, set함수명] = useState(초기값); useState 기능을 사용한 숫자 카운터 구현 import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)..

23-24/React.js 3 2023. 11. 24. 10:00

project 1 [카운터] 앱 만들기 프로젝트 준비하기 [카운터] 앱 프로젝트 진행 숫자를 더하고 빼는 기능을 구현 요구사항 분석하기 3개의 컴포넌트의 역할 App컴포넌트 : Viewer과 Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트 : 현재의 카운트를 표시함 Controller 컴포넌트 : 카운트를 제어할 수 있는 기능 제공 리액트 앱 만들기 7week > project1 생성 npx create-react-app . 명령어 입력 src 폴더에서 파일 삭제 src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js index.js 수정하기기 import React from 'react'; import ReactDOM..

23-24/React.js 3 2023. 11. 17. 10:00

1. 프로젝트 준비하기 App 컴포넌트: Viewer와 Controller 컴포넌트를 감싸는 템플릿이다. Viewer 컴포넌트: 현재의 카운트를 표시한다. Controller 컴포넌트: 카운트를 제어할 수 있는 기능을 제공한다. 리액트 앱 만들기 npx create-react-app . 다음 파일을 전부 삭제한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js index.js를 수정한다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; const root = ReactDOM..

23-24/React.js 2 2023. 11. 17. 10:00

카운터 앱 만들기 요구사항 분석하기 현재의 카운트를 표시: 따라서 이 영역의 이름을 뷰어(Viewer) 라고 하겠습니다. 카운트를 늘리거나 줄일 수 있는 6개의 버튼: 카운트를 제어하는 영역이라는 의미에서 컨트롤러(Controller)라고 이름 붙이겠습니다. 컴포넌트 단위로 생각하기 리액트에서 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요합니다. 앞에서 살 펴본 Viewer, Controller 영역을 일종의 컴포넌트라고 생각하는 겁니다. [카운 터] 앱에는 3개의 컴포넌트가 있습니다. App 컴포넌트: Viewer와 Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트: 현재의 카운트를 표시함 Controller 컴포넌트: 카운트를 제어할 수 있는 기능을 제공함 “하나의 컴포넌트는 단..

23-24/React.js 1 2023. 11. 17. 10:00

Hooks는 리액트 v16.8에 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect)을 할 수 있게 해 줍니다. 이번 실습은 우선 리액트 내장 Hooks를 사용하고 다음으로 커스텀 Hooks를 만드는 흐름으로 진행하겠습니다. 실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성해주세요. $ yarn create react-app hooks-tutorial 8.1 useState 3장에서도 사용해 보았던 useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 만약 함수 컴포넌트에서 상태를 관..

22-23/22-23 리액트 스타터 3 2022. 11. 24. 10:27

이번 8장에서 다룰 Hooks는 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서 상태 관리하기, 렌더링 직후 작업 설정하기 등)을 할 수 있게 합니다. 이는 리액트 v16.8에 새로 도입되었습니다. 이번 장에서 리액트 내장 Hooks를 사용하고 커스텀 Hooks를 만들어봅시다. 실습을 위하여 create-react-app을 이용해 새로운 프로젝트를 생성합시다. $ yarn create react-app hooks-tutorial 8. 1 useState 3장에서 사용하였던 useState는 가장 기본적인 Hook이며 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 합니다. 함수 컴포넌트에서 상태를 관리해야 할 때 이 Hook을 사용하면 됩니다. 이 useState를 사용하여 숫자 ..

22-23/22-23 리액트 스타터 1 2022. 11. 24. 10:00

**Hooks를 사용하는 방법 (1) 리액트 내장 Hooks 사용하기 (2) 커스텀 Hooks 만들기 I. useState => 함수 컴포넌트에서도 가변적 상태를 지닐 수 있게 해준다 //Counter.js import { useState } from 'react'; const Counter = () => { const [ value, setValue ] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 }; }; export default Counter; useState 함수의 파라미터에는 상태의 기본값이 들어가며, 여기서는 0이다 이 함수는 호출 시, 배열을 반환하며, 배열의 첫 번째..

22-23/22-23 리액트 스타터 2 2022. 11. 24. 10:00

INDEX 8장 Hooks 1. useState 1.1 useState를 여러 번 사용하기 2. useEffect 2.1 마운트될 때만 실행하고 싶을 때 2.2 특정 값이 업데이트될 때만 실행하고 싶을 때 2.3 뒷정리하기 3. useReducer 3.1 카운터 구현하기 3.2 인풋 상태 관리하기 4. useMemo 5. useCallback 6. useRef 6.1 로컬 변수 사용하기 7. 커스텀 Hooks 만들기 8. 다른 Hooks 9. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해준다. 8.1 useS..

21-22/21-22 리액트 스타터 -2 2021. 12. 27. 13:02

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. 8.1 Hooks useState는 가장 기본적인 Hook로, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook를 사용하면 됩니다. useState를 사용해서 숫자 카운터를 구현해 봅시다. - Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현..

21-22/21-22 리액트 스타터 -1 2021. 12. 27. 13:00

import React, {useState, useReducer} from 'react'; function reducer(state, action){ return { ...state, [action.name]: action.value }; } const Info = () => { const [state, dispatch] = useReducer(reducer, { name: '', nickname: ''}); const {name, nickname} = state; const onChange = e => { dispatch(e.target); }; return ( 이름: {name} 닉네임: {nickname} ); }; export default Info; Hooks는 함수형 컴포넌트에서도 상태 관리를..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00