Miracle Morning, LHWN

# useEffect 를 사용할 때에는 첫 번째 파라미터: 함수, 두 번째 파라미터: 의존 값이 들어있는 배열(deps) 만약에 deps 배열을 비우게 되면, 컴포넌트가 처음 마운트될 때에만 useEffect 에 등록한 함수가 호출된다. ​ useEffect 에서는 함수를 반환할 수 있는데 이를 cleanup 함수라고 부른다. 이 cleanup 함수는 useEffect 에 대한 뒷정리를 해주는데, deps가 비어있을 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다. import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에..

일단 users 배열안의 객체에게 'active' 라는 속성을 추가로 주고 시작! // App.js const [users, setUsers] = useState([ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com', active: true }, { id: 2, username: 'tester', email: 'tester@example.com', active: false }, { id: 3, username: 'liz', email: 'liz@example.com', active: false } ]); 객체의 active 값에 따라 폰트의 색상이 바뀌도록 + 마우스를 올렸을 때 커서가 손가락 모양으로 변하도록 구현! // UserLis..

// UserList.js import React from 'react'; function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map(user => ( ))} ); } export default UserList; 일단 username (email) 옆에 삭제 버튼을 달아주는데 그 버튼의 onClick 이벤트한테 user.id 를 props로 넘겨줘야 한다. onRemove(user.id)}>삭제 이 onRemove 함수는 App.js에서 구현 > UserList에서 받아서 ..

이번에는 부모 컴포넌트 App에서 상태관리를 하고, 의 값 및 이벤트 함수를 props로 넘겨받아서 사용해본다. // CreateUser.js import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; // App.js import React, { useRef } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const users = [ { id: 1, username: 'velopert..

# useRef의 기능은 아래 두 가지이다. (1) 컴포넌트에서 특정 DOM을 선택해야 할 때 (2) 컴포넌트에서 조회 및 수정할 수 있는 변수를 관리할 때 → useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되는 것은 아니다. (상태 State는 '상태를 바꾸는 함수를 호출 > 렌더링 > 업데이트된 상태 조회'하는 반면, useRef는 설정 후 바로 조회할 수 있음) ​ # useRef 변수로 관리할 수 있는 값은 아래와 같다. (1) setTimeout, setInterval 을 통해 만들어진 Id (2) 외부 라이브러리를 사용하여 생성된 인스턴스 (3) scroll 위치 // App.js import React, { useRef } from 'react'; import UserL..

import React from 'react'; function UserList() { 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' } ]; return ( {users[0].username} ({users[0].email}) {users[1].username} ({users[1].email}) {users[2].username} ({users[1].email}) ); } export default Us..

# JavaScript에서 특정 DOM을 선택할 때에는 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. ​ # 리액트에서는 함수형 컴포넌트의 경우 useRef 라는 Hook 함수를, 클래스형 컴포넌트에서는 React.createRef 라는 함수를 이용한다. ​ # useRef의 기능은 아래 두 가지이다. (1) 컴포넌트에서 특정 DOM을 선택해야 할 때 (2) 컴포넌트에서 조회 및 수정할 수 있는 변수를 관리할 때 (이 내용은 뒤에서 다룬다!) import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name:..

# 이 여러 개라고 useState를 여러 개 사용하는건 좋은 방법이 아니다! → useState에서 객체 형태를 통해 여러 상태를 관리해주면 된다! import React, { useState } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '', }); const { name, nickname } = inputs; const onChange = (e) => { const { value, name } = e.target; setInputs({ ...inputs, [name]: value }); }; const onReset = () => { setInputs({ name: ..

# 시작하기에 앞서 값을 관리하기 위해서는 input의 onChange라는 이벤트를 활용해주어야 한다. 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데, 이때 'e.target = 이벤트가 발생한 input DOM'을 가리키게된다. 이 input DOM의 value 값 = e.target.value는 현재 input 에 입력한 값인 것! import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); } const onReset = () => { setText(''); }; return ..

# 참고로 리액트 16.8 이전 버전에서 함수형 컴포넌트에서는 상태를 관리할 수 없었는데, 리액트 16.8 에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. ​ # useState도 이 Hooks 중 하나! ​ # 리액트에서 엘리먼트에 이벤트를 설정해줄 때 onClick={onIncreate} 처럼 설정을 해주는데, 이때 함수형태를 넣어주어야 하지, 함수를 실행하면 안된다. ​ onClick={onIncrease} (O) onClick={onIncrease()} (X) → 렌더링을 하는 과정에서 함수가 호출되어버리기 때문 ​ # 컴포넌트에서 동적인 값을 '상태(state)'라고 한다. import React, { useState } from 'react'; fun..