Miracle Morning, LHWN

# 상태를 업데이트하는 방법에는 useState, useReducer가 있다. 다만, useReducer Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트로부터 분리시킬 수 있다. (컴포넌트 밖, 다른 파일에서도 사용할 수 있다.) reducer 란 reducer 는 현재 상태(state)와 액션 객체(action)를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만들어주는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다. action 에는 업데이트를 위한 정보를 가지고 있다. 주로 'type'..

# React.memo 를 이용하면, 컴포넌트의 props 가 바뀌지 않았을 때 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. → 리렌더링이 필요한 상황에서만 하도록 설정할 수 있는 것이다! // CreateUser.js import React from 'react'; const CreateUser = ({ username, email, onChange, onCreate }) => { return ( ... export default React.memo(CreateUser); // UserList.js import React from 'react'; const User = React.memo(function User({ user, onRemove, onToggle }) { retu..

# useCallback은 useMemo 와 비슷한 Hook 인데 useMemo는 특정 결과 값을 재사용, useCallback은 특정 함수를 새로 만들지 않고 재사용하는데에 사용된다. const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // = user.id 가 id 인 것을 제거함 setUsers(users.filter(..

import React, { useRef, useState } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const onChange = e => { const { name..

# 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..

# 이번에는 API 형태로 Flyway 를 사용해보고, 데이터의 신뢰성을 위해 실행될 때마다 (1) 초기화 Clean - (2) Migrate 의 순서로 수행할 것이다. 이때 Clean 하는 작업을 따로 Class 로 분리하여 Configuration annotation 을 지정한다. # 먼저 API 형태로 Flyway 를 사용하기 위해 데이터베이스 정보를 설정한다. // FlywayConfig.java package com.springJPAPractice.springJPAPractice.Configs; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Bean; im..

# gradle Project 를 생성해서 Flyway 를 사용해본다. # 우선 프로젝트에 SQL 주소, user 정보 등을 설정하고 ddl-auto 가 어떤 방식으로 반영될지를 설정해준다. // /main/resources/application.properties spring.datasource.url=jdbc:mysql://localhost:3306/db_example spring.datasource.username=sa spring.datasource.password=password spring.jpa.hibernate.ddl-auto=none # 그리고 flyway 가 데이터베이스에 접근할 때 사용하는 정보를 명시해주어야 하는데 여기에서는 REAL 환경과 TEST 환경을 분리하여 작성했다. (RE..