-

다음과 같은 배열이 있다고 가정하자. const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 이 배열을 컴포넌트로 렌더링해야할 때, 그대로 코드를 작성하는 것은 비효율적이다. 또한 배열이 고정적이라면 상관이 없겠지만 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못한다. 동적인 배열을 렌더링할 때는 자바스크립트 배열의 내장함수인 map() 함수를 사용한다. map() 함수..

리액트 16.8 이전 버전에서는 함수형 컴포넌트로 상태를 관리할 수 없었다. 하지만 리액트 16.8에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 간단하게 카운터 예제로 확인해보자. Counter.js import React from 'react'; function Counter() { return ( 0 +1 -1 ); } export default Counter; App.js import React from 'react'; import Counter from './Counter'; function App() { return ( ); } export default App; 위 코드를 실행하면 이런 화면이 뜬다. 이벤트 설정 Counter.js import R..

react-router-dom 은 리액트 패키지(create-react-app)에 포함되어있지 않기 때문에 추가 설치를 해줘야한다. npm i -s react-router-dom 또한 Route 태그는 Routes 태그로 감싸주어야 한다.