1. useReducer 이해하기 이전에 작성한 [할 일 관리] 앱을 열고 component 폴더에 TestComp.js라는 임시 컴포넌트를 하나 만든다. TestComp.js 작성 import { useState } from "react"; function TestComp() { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( 테스트 컴포넌트 {count} + - ); } export default TestComp; TestComp를 App 컴포넌트의 자식으로 배치해 페이지에 렌더링 한..

23-24/React.js 2 2023. 12. 29. 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

이벤트 처리하기 이벤트란 웹 페이지에서 일어나는 사용자의 행위를 말한다. 이벤트의 예로 버튼 클릭, 페이지 스크롤, 새로고침 등이 있다. 이벤트 핸들링과 이벤트 핸들러 이벤트 핸들링은 이벤트가 발생했을 때 특정 코드가 동작하도록 만드는 작업이다. 다음은 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시하도록 만든 이벤트 핸들링의 예시이다. // Body.js function Body() { function handleOnclick(){ //함수 handleOnClick 선언 alert("버튼을 클릭하셨군요!"); // 경고 대화상자 표시하도록 함 } return ( //버튼 생성하고 클릭시 이벤트를 처리하는 이벤트 핸들러 함수 handleOnClick 호출함 클릭하세요 ); } export defaul..

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

이벤트 처리하기 이벤트란 웹 페이지에서 일어나는 사용자의 행위로 버튼 클릭, 페이지 스크롤, 새로고침 등의 행위에 해당합니다. 이벤트 핸들링과 이벤트 핸들러 이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업 이벤트 핸들러 : 이벤트를 처리하는 함수 ex. 리액트 사용하지 않고 HTML과 자바스크립트만으로 이벤트를 핸들링 Click Me! 함수 handleOnClick ⇒ 이벤트를 처리하는 함수로 이벤트 핸들러입니다. 리액트의 이벤트 핸들러 ex. Body 컴포넌트에 버튼 하나 만들고 버튼을 클릭하는 이벤트가 발생하면 실행되는 이벤트 핸들러를 만듭니다. function Body() { function handleOnClick() { alert("버튼을 클릭하셨군요!"); } // 함수..

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

전개 연산자와 배열의 내장 함수를 이용해 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어쓸 수 있습니다. 그러나 객체 구조가 엄청나게 깊어지면 불변성을 유지하며 이를 업데이트하기 어렵습니다. 이번 장에서는 immer라는 라이브러리를 사용하여 구조가 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트하는 것을 배워보도록 하겠습니다. 12.1 immer를 설치하고 사용법 알아보기 immer 라이브러리를 사용하기 위해서는 yarn을 통해 설치해야 합니다.이번 예제로 쓸 리액트 프로젝트와 함께 immer을 설치해 주세요. $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer 위와 같이 폼에서 아이디와 이름을 입력하면..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:01

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

3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수 컴포넌트와 클래스형 컴포넌트가 있습니다. 2장에서 보았던 코드는 함수 컴포넌트로, 다음과 같은 구조로 이루어져 있습니다. import './App.css'; function App() { const name = 'react'; return {name}; } export default App; 함수 컴포넌트는 클래스형 컴포넌트보다 선언하기 훨씬 편하다는 장점이 있습니다. 다음은 클래스형 컴포넌트의 구조를 보겠습니다. import React, { Component } from 'react'; class App extends Component{ render() { const name = 'react'; return {name}; } } ex..

22-23/22-23 리액트 스타터 3 2022. 10. 6. 10:00

이번 장에서는 컴포넌트에 대해 배워보겠습니다. 1장에서 컴포넌트는 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체라고 배웠습니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지로, 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다. import React from ‘react‘; import ‘./App.css‘; function App() { const name = ‘리액트‘; return {name}; } export default App; 2장에서 보았던 App.js는 함수형 컴포넌트입니다. import React, { Component } ..

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