Web Programming/React 기본

[React] React.js 강좌 18. useReducer

1. useReducer 기존에 state를 새로운 상태로 업데이트하는 useState라는 Hook함수가 있었는데, useState와 다르게 상태를 관리하는 Hook으로 useReducer가 있습니다. 이 Hook함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성하며, 다른 파일에서 작성 후 불러와서 사용할 수 있습니다. 먼저 reducer 가 무엇인지 알아보겠습니다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextStat..

[React] React.js 강좌 17. 불변성

1. 불변성 불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것입니다. 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 합니다. JS에서 원시 타입은 괜찮지만 객체 타입의 불변성을 지키는 것은 고려해야 할 부분이 있습니다. 아래와 같은 코드가 있다고 했을 때 user와 copyUser 변수는 같은 참조(Memory Address) 값을 가집니다. (객체 타입은 참조 값을 주고받습니다.) 그렇기 때문에 user가 가지고 있는 객체의 값이 변경되면 copyUser도 같은 객체를 가지기 때문에 값이 공유됩니다. 하지만 이런 작동 방식은 값을 예측할 수 없게 하거나 버그를 유발하기 때문에 불변성을 통해서 해결합니다. const user = { name: 'Choi',..

[React] React.js 강좌 16. useCallback

1. useCallback useCallback이라는 Hook함수는 useMemo와 같이 함수를 Memozation하기 위해서 사용됩니다. useCallback은 첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열 내의 값이 변경될 때 까지 저장해 놓고 재사용 할 수 있게 해줍니다. const callback = useCallback(함수, 배열); 만약, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 랜더링될 때 마다 새로운 함수가 생성됩니다. const add = () => x + y; 하지만 useCallback()을 사용하면, 해당 컴포넌트가 랜더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉, x 또는 y ..

[React] React.js 강좌 15. useMemo

1. Memoization useMemo에 대해 설명하기에 앞서, memoization에 대한 선행 지식이 필요한데요. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 2. React 랜더링 구조 일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성이 됩니다. function MyComponent(props) { // 어떤 로직 (JavaScript) return; /* 어떤 화면 (JSX) */ } 이렇게 작성된 컴포넌트 함수는 React 앱에서 랜더링(ren..

[React] React.js 강좌 14. useEffect

1. UseEffect useEffect는 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 Hook 함수입니다. 2. 마운트 / 언마운트 사용 src/UserList import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({us..

[React] React.js 강좌 13. useState

1. useState란? 리액트의 Hooks 기능 중 하나인 useState는 함수형 컴포넌트를 사용하는데 있어서 가장 많이 사용되는 컴포넌트 입니다. 컴포넌트에서 동적으로 변화되는 값을 state(상태)라고 부릅니다. 이 상태를 관리하기 위해 사용되는것이 useState라고하는 Hook입니다. 가장 유명한 버튼을 누르면 숫자가 바뀌는 카운터 예제를 보겠습니다. src/Counter.js import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const ..

[React] React.js 강좌 12. useRef

1. 개요 javascript를 사용할때는 특정 DOM을 선택하는 상황에서 getElementById나 querySelector같은 DOM Select 함수를 사용해서 DOM을 가져오곤 합니다. 특정 같은 부분의 DOM을요. 리엑트를 사용할때도 DOM을 직접 선택해야하는 상황이 생기는데 이럴 때 리액트에선 ref를 사용합니다. 일반적으로 애플리케이션 대부분의 컴포넌트에서 DOM을 다루는 것은 권장되지 않습니다. 왜냐하면 내부 DOM 요소에 대한 정보를 지나치게 간섭하게 되면 의존성에 대한 문제가 발생하기 때문입니다. 하지만 포커스, 선택, 애니메이션과 같은 기능을 관리하기 위해서는 DOM 요소에 접근을 해야하기 때문에 일반적으로 위와 같은 기능에서는 ref를 통해 DOM에 접근하는 것을 허용합니다. 이때..

[React] React.js 강좌 11. Context

React Context 1. 개요 리액트 앱을 개발하다보면 모든 컴포넌트(최상위 컴포넌트에서 최하위 컴포넌트)에 특정 값을 props로 넘기고 싶을 때가 있습니다. 전역(global)로 선언된 데이터가 있으면 참 편할텐데 말이죠. 이 Context는 리엑트 컴포넌트 트리 안에서 Global한 데이터를 공유할 수 있도록 고안된 방법입니다. 이러한 데이터는 보통 현재 로그인한 유저, 적용중인 테마, 선호하는 언어 등이 있을 수가 있습니다. 단계적으로 props를 전달하지 않아도 Context를 사용하면 Global한 데이터를 효율적으로 사용할 수가 있겠죠. 2. 일반적인 props의 사용 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨줍니다. class App extends R..

[React] React.js 강좌 10. map, slice, concat, spread 사용법

React map, slice, concat, spread 사용법 1. 기본적인 map() 사용법 map()함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다! const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num *2); console.log(result); numbers.map 안에 (num)이라고 되어있는 부분이 있는데, 이거는 함수 내부에서 임의로 지정한 변수이기 때문에 아무렇게나 작성하셔도 됩니다!(알기 쉬운 data나 param 등등…) 위 코드의 결과로는 각 요소의 2배인 값이 나옵니다! 2. 함수형 컴포넌트에서 map() 사용하기 이제 본격적으로..

[React] React.js 강좌 9. Input 상태 관리하기

React Input 상태 관리하기 1. Form을 사용한 컴포넌트 만들기 먼저 input을 다루기 위해 Form DOM을 사용한 컴포넌트를 만들어봅니다. import React, {Component } from 'react'; export default class FormTest extends Component{ state ={ id: '', name: '' } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }) } render(){ return( {this.state.id} {this.state.name} ) } } 여기서 handleChange의 파라미터 e는 event의 줄임말로 input에서 입력한 값의 변화가 있..