What 인간에게 탄생부터 죽음까지 이르는 생명 주기가 있듯이 리액트의 컴포넌트에도 탄생-변화-죽음이라는 생명 주기가 있다. 컴포넌트가 화면에 나타나는 것을 Mount라 하고 업데이트(re-render)되는 것을 Update, 화면에서 사라지는 것을 UnMount라고 한다. 각 단계마다 컴포넌트를 제어하는 방법이 바로 useEffect이다. How Mount(탄생) // 컴포넌트가 화면에 생성되었을 때 실행 useEffect(() => { console.log('Mount') }, []) useEffect()는 기본적으로 콜백 함수를 가지며, deps라고 하는 의존성 배열을 가진다. deps를 빈 배열로 두면 컴포넌트의 탄생인 Mount일 때 한 번 console.log를 실행한다. Update(변화) ..

What reduce()에 대한 정의는 사실 간단하다. 배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다고 MDN에 정의되어 있다. 사용하는 방법도 간단하다. 콜백 함수를 사용하므로, 콜백 함수의 매개 변수에 순서대로 누산기(acc), 현재 값(cur), 현재 인덱스(idx), 원본 배열(src)을 집어 넣으면 된다. 주로 사용되는 게 누산기와 현재 값인데, 여기서 누산기를 그냥 reduce()가 가지고 있는 작은 저장소 정도로 이해하면 쉽다. reduce() 메서드는 이러한 reducer 덕분에 웬만한 다른 배열 메서드를 대신하여 사용할 수 있다. 즉 메서드를 함수처럼 사용할 수 있는 것이다. 때문에 많은 개발자들이 reduce()를 좋아한다. 단순히 배열 원소..

What 이 글을 읽기 전 먼저 컴포넌트의 구조와 각 컴포넌트마다 어떤 동작을 수행할 지에 대해서 이해해야 한다. 컴포넌트는 총 4개로 최상위 컴포넌트인 App, 그 아래 자식 컴포넌트인 Editor와 List, 최하위 컴포넌트인 Item으로 구성되어 있다. 최상위 컴포넌트인 App에서는 useState를 통해 state를 배열화시켜 그 안에 객체로서 입력된 데이터들을 저장할 것이다. 즉, App의 state가 출력될 데이터라고 생각하면 된다. 자식 컴포넌트인 Editor에서는 사용자가 입력한 데이터들을 App의 state에 저장하는 역할을 한다. App의 props로 전달받은 useState의 setState(상태 변화 함수)를 이용해서 부모 컴포넌트의 state를 변경할 수 있다. List 컴포넌트에..

What 리액트에서 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있다는 것은 알고 있다. 이번에는 Props가 배열안의 객체 형태이고, map()을 통해 반복 수행하며 데이터를 조회할 수 있는 방법에 대해서 알아볼 것이다. How /* 최상위 컴포넌트 App */ import List from './List' const App = () => { const nameList = [ { id: 1, name: 'Kim', food: '김치찌개' }, { id: 2, name: 'Lee', food: '된장찌개' }, { id: 3, name: 'Park', food: '순두부찌개' } ] return ( ) } 첫 번째로 최상위 부모 컴포넌트인 App.js에 전달할 데이터 nameL..

Before import React, {useState} from 'react'; const Sample = () => { /* writer useState */ const [writer, setWriter] = useState('Shawn'); const writerHandler = (e) => { setWriter(e.target.value); } /* content useState */ const [content, setContent] = useState(''); const contentHandler = (e) => { setContent(e.target.value); } return ( ) } 위 코드에서 input은 2개이고, 따라서 저장해야 하는 데이터의 값도 2개이기 때문에 useState도..