Hooks는 리액트에 새로 도입된 것으로 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도와준다. 리액트 내장 Hooks사용 -> 커스텀 Hooks 만들기    1. useStateuseState: 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. (함수형 컴포넌트에서 상태를 관리) useState 함수의 파라미터에는 상태의 기본값을 넣어 준다. 현재 0을 넣어 주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미다. 이 함수가 호출되면 배열을 반환한다. 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수다. 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링된다.   // Counter.jsimport..

24-25/React.js 1 2024. 11. 29. 10:00

HooksHooks는 리액트 v16.8에 새로 도입된 기능으로 함수로 만든 리액트 컴포넌트에서 클래스로 만든 리액트 컴포넌트의 기능을 이용하도록 도와주는 함수들이다. Hook은 기존의 함수형 컴포넌트에서는 할 수 없었던 작업을 할 수 있다.    앞서 공부한 내용에서 리액트 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있고 state라는 중요한 개념이 있었다. 클래스형 컴포넌트는 생성자에서 state를 정의하고 setState() 함수를 통해 state를 업데이트하고 라이프 사이클에 따라 사용할 수 있었다. 반면, 함수형 컴포넌트에서는 state를 사용하거나 라이프 사이클에 따라 구현할 수 없다. Hook의 사용은 이러한 부분을 보완하고 함수형 컴포넌트에서도 클래스로 만든 컴포넌트의 기능을..

24-25/React.js 2 2024. 11. 29. 10:00

project 1 [카운터] 앱 만들기1. 프로젝트 준비하기프로젝트를 구현하기 전, 앱을 어떤 설계와 기능으로 구현할지 살펴보는 단계인 요구사항 분석 과정을 거쳐야 한다. 리액트 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요하다. [카운터] 앱의 요구사항 분석을 하자면App 컴포넌트: Viewer 컴포넌트와 Controller 컴포넌트를 감싸는 템플릿Viewer 컴포넌트: 현재의 카운트 표시Controller 컴포넌트: 카운트를 제어재사용 가능한 수준에서 기능 별로 컴포넌트를 분리하면 프로젝트를 관리하기 쉬워진다.  2. UI 구현하기UI란 사용자 인터페이스라는 뜻으로, 웹 페이지에서 사용자와 상호작용하는 요소를 말한다. 요소의 외양(껍데기)라고 생각하면 된다.2-(1). Viewer 컴포넌트 만들..

24-25/React.js 1 2024. 11. 22. 10:00

1. 프로젝트 준비하기 지금까지 리액트에 대해 학습한 내용을 바탕으로 카운터 앱을 만들어 보자.  카운터 앱은 간단한 덧셈과 뺄셈 기능만 갖추고 있으므로, 첫 리액트 프로젝트에 적합하다.  프로젝트 구현에 앞서 먼저 어떤 설계와 기능을 구현할지 살펴보는 일이 필요하다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다. 이 파트에서는 요구사항을 분석하면서 카운터 앱 프로젝트를 준비한다.   [ 요구사항 분석 ] 이 앱은 1개의 페이지에서 제목, Viewer (현재 카운트 표시 영역), Controller(카운트 제어 영역) 세 부분으로 나뉜다.   [ 컴포넌트 단위로 생각하기 ]  앞서 언급한 부분 중 Viewer와 Controller 영역을 컴포넌트로 취급하면 이 앱은 다음의 세 가지 컴포넌트로 구성..

24-25/React.js 2 2024. 11. 22. 10:00

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