컴포넌트를 만들다보면 반복되는 로직이 자주 발생하는데 그럴 때 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용 하는 방법을 알아보자 src에 hooks 라는 디렉토리를 만들고, 그 안에 useInputs 라는 파일을 만들자 *커스텀 Hooks 를 만들 때에는 보통 use 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성함 안에서 useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현하고 컴포넌트에서 사용하고 싶은 값들을 반환 해주면 됌. useInputs.js import React, {useCallback, useState} from "react"; function useInputs(initialForm) { const [form, s..

React.memo 는 컴포넌트의 props 가 변하지 않았으면 리렌더링을 방지해서 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있음 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정 할 수 있음 CreateUser.js import React from "react"; const CreateUser = ({username, email, onChange, onCreate}) => { return ( 등록 ); }; export default React.memo(CreateUser); function > const 로 변경후 감싸주면 됨 export default 에 CreateUser 를 React.memo 로 감싸주기만 하면 됨 UserList.js 도 해주자 import React, {us..

useCallback 은 useMemo 와 비슷한 Hook 임 useMemo 는 특정 결과 값을 재사용 할 때 사용 useCallback 은 특정 함수를 새로 만들지 않고 재사용 할 때 사용 아래의 함수는 컴포넌트가 리렌더링 될 때 마다 새로 만들어짐 솔직히 함수를 선언하는것 자체는 메모리, CPU, 리소스도 많이 차지 하지 않아서 딱히 신경 안써줘도 되긴 하지만 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 중요함. 나중에 컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는것 조차 하지 않고 컴포넌트의 결과물을 재사용하는 최적화 작업을 할텐데 그 작업을 하려면 함수를 재사용 하는것이 필수 const onCreate = () => { const user = { ..

가뜩이나 힘든 컴포넌트 구조를 개발자 도구에서 보자 1. 아래 링크로 가서 설치/ 등록 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022. chrome.google.com 2. 확장 프로그램 등록 / 세부설정 3. 개발자 도구를 열고 컴포넌트 렌더링 업데이트시 하이라이트 처리 체크 그럼 사이사이에 하이라이트 처리가 된다 렌더링 업데이트가 ..

성능 최적화를 위하여 연산된 값을 useMemo 라는 Hook 을 사용하여 재사용 하는 방법을 알아보자 App 컴포넌트에서 아래와 같이 countActiveUsers 라는 함수를 만들어서, active 값이 true 인 사용자의 수를 세어서 화면에 렌더링 해보자 App.js import React, {useRef, useState} from 'react'; import CreateUser from './components/CreateUser'; import UserList from "./components/UserList"; function App() { function countActiveUsers(users) { console.log("active 값이 ture 인 유저의 수를 센는중..."); re..

useEffect 가 하는 일? useEffect Hook 을 이용하여 React 에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야하는지를 말하는것 React 는 넘겨준 함수를 기억했다가 (이 함수가 'effect') DOM 업데이트를 수행한 이후에 불러냄 effect 를 통해 데이터를 가져오거나 다른 명령형 (imperactive) API 를 불러내는 일을 할 수도 있음 useEffect 를 컴포넌트 안에서 불러내는 이유? useEffect 를 컴포넌트 내부에 둠으로써 effect 를 통해 const state 변수, prop에 접근할 수 있음 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있음 Hook 은 자바스크립트의 클로저를 이용하여 React 에 한정된 API 를 고안하..

User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현해보자 users 배열안에 active 라는 속성을 추가해주자 App.js import React, {useRef, useState} from 'react'; import CreateUser from './components/CreateUser'; import UserList from "./components/UserList"; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const {username, email} = inputs; const onChange = e => { const { name,..

이번에는 배열에 항목을 제거 해보자 앞의 글과 계속 이어지는 중 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; User 컴포넌트의 삭제 버튼이 클릭 될 때에는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출 해 주어야한다. 여기서 onRemove 는 "id 가 ~~~ 인 객체를..

자~ 연동 드가자~ 인텔리제이, node.js 가 설치되어있다는 가정하에 연동을 시작해보자 (강제로 잠깐 떠났지만 인텔리제이가 그리웠다.. 인텔리제이 못 잃어..) 1. File -> New -> Project 클릭 2. Spring Initializr 에서 설정하기 언어가 코틀린이면 코틀린으로 바꾸고 설정! 타입은 메이븐이나 그래들 중 본인이 사용하는것ㄱㄱ 3. 원하는 Dependencies 선택 Spring Web만 있어도 된다! 나중에 추가 설정 가능 4. 프로젝트를 만들면 이런식으로 생길텐데 터미널을 열자 npx create-react-app 원하는 디렉토리 이름 위의 이미지의 simple-react 는 내가 명명한 것이다. 그 후 엔터를 누르면 설치 시작! 가만히 구경만 해주자 그러면 happy..

배열에 새로운 항목을 추가하는 방법을 알아보자! 우선 input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트를 components 디렉터리에 생성 import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; 이번 컴포넌트에는 상태관리를 CreateUser 에서 하지 말고 보무 컴포넌트인 App 에서 하게 하고, input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용해보자 위의 컴포넌트를 App 에서 UserList 위에 렌더링 해보자 App.js import './App.css..

컴포넌트에서 특정 DOM 을 선택해야 할 때 => ref 를 사용 함수형 컴포넌튼에서 이를 설정 할 때 => useRef 사용 설정 useRef Hook 은 DOM 을 선택하는 용도 외에도, 다른 용도가 있다! 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후 업데이트 된 상태를 조회 할 수 있지만, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있다. 이 변수를 사용하여 다음과 같은 값을 관리 할 수 있다. setTimeout, setInterval 을 통해서 만들어진 id 외부 라이브러리를 사용하여 생..

아래와 같이 배열을 하나하나 렌더링 하는것은 노가다를 해야해서 별로 좋지 않아서 컴포넌트를 재사용 할 수 있도록 새로 만들어 보자! ** 한 파일에 여러개의 컴포넌트를 선언해도 괜찮다! 일단은 노가다 버전 UserList.js import React from 'react'; function usersList() { const users = [ { id: 1, usersname: 'velopert', email: 'public.velopert@example.com' }, { id: 2, usersname: 'tester', email: 'tester@example.com' }, { id: 3, usersname: 'admin', email: 'imAdmin@example.com' } ]; return ( ..