목록 Introduction React.memo Conclusion 📌 Introduction 안녕하세요. 이번 포스팅에서는 지난 시간에 언급 했었던 React.memo에 대해서 알아보겠습니다. 컴포넌트의 랜더링이 불필요할때 쓸수 있어요. 컴포넌트 리랜더링을 최적화 할수 있습니다. 한번 자세하게 알아볼게요. 📌 React.memo 사용 방법은 간단합니다. export default를 해줄때 감싸주시면 되요. export default React.memo(CreateUser); 혹은 이렇게도 가능해요. // 이렇게 생긴 아이를 function User() { // ... } // 이렇게 변경이 감싸줄수 있어요 const User = React.memo(function User(){ // ... }); 이렇..
목록 Introduction useCallback Conclusion 📌 Introduction 안녕하세요. 오늘은 react에서 useCallback을 사용해서 새로운 함수를 선언을 하기보다 재사용하는 방법에 대해서 알려드리려고 합니다. 📌 useCallback 만약 이런 함수가 컴포넌트 내부에 있다고 가정을 해볼게요. const onToggle = (userId) => { setUsers( users.map((user) => user.id === userId ? { ...user, active: !user.active } : user ) ); }; 그렇다면 위에 있는 onToggle은 컴포넌트가 랜더링이 될때마다 다시 선언을 해주게 될거 예요. 하지만 앞선 포스팅에 useMemo와 같이 이렇게 해줄수..
목록 Introduction useMemo Conclusion 📌 Introduction 안녕하세요 이번 포스팅에서는 useMemo를 이용하여 이전에 연산 되었던 값을 기억하는 방법에 대해서 알아보겠습니다. useMemo는 주로 성능을 최적화할때 사용을 하게 됩니다. 📌 useMemo 일단 먼저 countActiveUser라는 함수를 한번 정의를 해보겠습니다. function countActiveUsers(users) { console.log("활성 사용자 수를 세는중..."); return users.filter((user) => user.active).length; } 단순하게 user에서 active인 숫자만 걸러주는 함수입니다. 만약 이렇게 사용을 count의 숫자를 그대로 사용해줄 경우 comp..
목록 Introduction onMount, onUnMount Conclusion 📌 Introduction 안녕하세요 오늘은 react의 useEffect hooks에 대해서 알아보겠습니다. 📌 onMount, onUnMount 간단하게 onMount와 onUnMount를 useEffect에서 한번 구현해보겠습니다. onMount는 vue에서 created() 보다 mounted에 가깝습니다. 그래서 dom에 접근도 가능합니다. // onMount useEffect(() => { console.log("컴포넌트가 화면에 나타남"); // onUnMount return () => { console.log("컴포넌트가 화면에서 사라짐"); }; // deps -> dependecies에 약자 }, []);..
목록 Inroduction 배열 추가하기 배열 삭제하기 배열 수정하기 Conclusion 📌Introduction 안녕하세요. 오늘은 react에서 배열을 어떻게 조작을 하는지에 대해 알아보겠습니다. 📌 배열 추가하기 일단 먼저 CreateUser라는 컴포넌트를 만들어보겠습니다. 그냥 간단한 컴포넌트예요. input 두개와 button이 하나가 있는 간단한 컴포넌트 입니다. 그리고 presentational component기 때문에 로직적인 부분은 props로 받아올거예요. // CreateUser.js import React from "react"; // onChange는 input에 onCreate는 버튼 이벤트 입니다. function CreateUser({ username, email, onCh..
목록 Introduction useRef Conclusion 📌 Introduction 안녕하세요. 오늘은 useRef로 변수를 선언하는 것에 대해서 알아보겠습니다. 값을 선언할때 react에서는 두가지 방식이 있어요. 하나는 useState를 사용하는 방식이고 하나는 useRef를 사용하는 방식입니다. 두개의 차이점은 useState는 값이 변경이 될때 rerendering이 이루어 지고 useRef는 값이 변경이 되어도 rerendering이 이루어지지 않습니다. 또한 component가 re-rendering될때에도 값을 기억하고자 할때 useRef 를 사용하게 됩니다. 그럼 기본적인 문법과 사용하는 예제를 알아보겠습니다. 📌 useRef const nextId = useRef(4); // comp..
📌 목록 Introduction rendering array Conclusion 📌 Introduction 안녕하세요. 오늘은 array의 항목들을 랜더링하는 방법에 대해서 알아보겠습니다. 해당 내용은 vue에서 v-for과 비슷합니다. 📌 rendering array 어떻게 array를 랜더링 할까요? 방법은 map을 이용하는 겁니다. import React from "react"; function User({ user }) { return ( {user.username} {user.email} ); } function UserList() { const users = [ { id: 1, username: "eddie", email: "eddie@gmail.com", }, { id: 2, username..
📌 목차 Introduction useRef Conclusion 📌 Introduction 안녕하세요. 이번 시간에서는 useRef를 변수같이 사용하는 것이 아닌 document.querySelector와 같은 기능을 하는 react useRef를 만나볼게요. 📌 useRef import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: "", nickname: "", }); const nameInput = useRef(); const { name, nickname } = inputs; const onChange = (e) => { const { name,..
