📌 목록 HOC 란? 간단한 HOC 구현 JSON Placeholder 데이터로 withLoader 만들기 HOC의 장점과 단점 📌 HOC 란? High Order Component는 공통 로직을 재사용 해서 사용하게 끔 만들어 줍니다. 마치 mixin과 같이요. 하지만 어떤 컴포넌트를 한번 감싸서 컴포넌트를 만들게 합니다. 그럼 한번 어떤 녀석인지 볼까요? 📌 간단한 HOC 구현 먼저 이런 withStyle 함수를 한번 정의해볼게요. const withStyle = (Component) => { return props => { return } } 그리고 버튼과 Text를 만들어 보겠습니다. import withStyle from "./hoc/withStyles"; const Button = ({ sty..
📌 목차 Introduction context api Conclusion 📌 Introduction 안녕하세요. 오늘은 context api를 사용해서 전역에서 상태 값을 관리하는 법에 대해서 알아보겠습니다. 📌 context api context api를 사용하기에 앞서 두가지 hook을 알야합니다. createContext useContext 입니다. createContext는 말그대로 context를 만들어줍니다. const MyContext = createContext("defaultValue"); 첫번째 인자로 초기 값을 설정할 수 있습니다. useContext는 createContext로 만든 값을 사용하게 됩니다. const text = useContext(MyContext); 그럼 이제 간..
목차 Introduction useState와의 차이점 reducer useReducer Conclusion 📌 Introduction 안녕하세요. 오늘은 react에서 또다른 state관리 hook인 useReducer에 대해서 알아보겠습니다. useReducer는 vuex와 비슷하다고 생각하면 됩니다. action을 통해 상태를 변경해줄 수 있다는 점에서 비슷합니다. 📌 useState와의 차이점 일단 useState에서 값을 바꿔줄때는 다음과 같습니다. setState(5);이렇게 setState를 이용하여 바꿔주게 되는데 useReducer는 조금 다릅니다. dispatch({ type: INCREMENT });이렇게 action에 type을 받아 값을 바꾸는 것을 수행하게 됩니다. 또한 useS..
목록 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..
목록 Inroduction 배열 추가하기 배열 삭제하기 배열 수정하기 Conclusion 📌Introduction 안녕하세요. 오늘은 react에서 배열을 어떻게 조작을 하는지에 대해 알아보겠습니다. 📌 배열 추가하기 일단 먼저 CreateUser라는 컴포넌트를 만들어보겠습니다. 그냥 간단한 컴포넌트예요. input 두개와 button이 하나가 있는 간단한 컴포넌트 입니다. 그리고 presentational component기 때문에 로직적인 부분은 props로 받아올거예요. // CreateUser.js import React from "react"; // onChange는 input에 onCreate는 버튼 이벤트 입니다. function CreateUser({ username, email, onCh..
