리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야합니다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 id 가 고유 값이지요. 만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하시면 됩니다. {users.map((user, index) => ( ))} function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gm..

- useRef : 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때 사용하는 훅 1. useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 됩니다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); const { name, nickname } = inputs; //..

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데요, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState 라는 함수를 사용해보게 되는데, 이게 바로 리액트의 Hooks 중 하나입니다. function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } // 함수를 만들고, button 의 onClick 으로 각 함..

- JSX 안에서 자바스크립트 변수 사용 시 function App() { const name = 'react'; return ( {name} ); } - JSX 안에서 style 혹은 css 클래스 사용 시 1. style 지정 : 우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다. 2. css 클래스 : CSS class 를 설정 할 때에는 class= 가 아닌 className= 으로 설정을 해주어야 합니다. function App() { const name = 'react'; const style = { backgroundColor: 'black..

- TypeScript : JavaScript와 100% 호환되는 정적 타입 언어로 바벨을 통해 JavaScript 코드로 변환(확장자를 .js -> .ts로 변환해 컴파일 하기 때문에) const fromOptions = [ { value: '', text: '자금 출처을 선택해주세요.' }, { value: '11', text: '근로소득' }, { value: '12', text: '사업소득' }, { value: '13', text: '연금소득' }, { value: '14', text: '부동산 임대소득' }, { value: '15', text: '부동산 등 양도소득' }, { value: '16', text: '금융소득' }, { value: '17', text: '상속/증여' }, { va..

- Styled Component : CSS in JS 라이브러리(tagged template literal 사용) const Circle = styled.div` width: 5rem; height: 5rem; background: black; border-radius: 50%; `; function App() { return ; } - props 이용 예제 import React from 'react'; import styled from 'styled-components'; const Circle = styled.div` width: 5rem; height: 5rem; background: ${props => props.color || 'black'}; border-radius: 50%; `; fun..