yevdev◡̈

Surfee 런칭이 완료됐다 ! 사이트는 https://surfee.co.kr 여기로 🚀 (많은 피드백과 후기 부탁함니다😊) ➰자세한 정보 (디스콰이엇) : https://disquiet.io/product/surfee-1645603651836 Surfee | Disquiet* 노코드 랜딩페이지 제작 툴 disquiet.io ➰Github repository : https://github.com/thxxx/kiwi GitHub - thxxx/kiwi: LandingPage MVP for Kiwi LandingPage MVP for Kiwi. Contribute to thxxx/kiwi development by creating an account on GitHub. github.com FE 개발자로 참여..

Github GitHub - yexjin/Rendering: 서울과학기술대학교 고급웹프로그래밍 프로젝트 🦋 서울과학기술대학교 고급웹프로그래밍 프로젝트 🦋. Contribute to yexjin/Rendering development by creating an account on GitHub. github.com API 문서 Rendering The Postman Documenter generates and maintains beautiful, live documentation for your collections. Never worry about maintaining API documentation again. documenter.getpostman.com Design 문서 플로우 2 18 Screens..

커스텀 Hook은 언제 필요? 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생 input을 관리하는 코드는 관리 할 떄마다 꽤나 비슷한 코드가 반복 이번 포스팅 내용은, 위의 상황에 커스텀 Hooks를 만들어서 반복되는 로직을 쉽게 재사용하는 방법을 알아보는 것이다. 커스텀 Hooks 만드는 방법 src 디렉터리에 hooks라는 디렉터리를 만들고, 그안에 useInputs.js 파일을 만든다 커스텀 Hook을 만들대는 보통 이렇게 use 라는 키워드로 시작하는 파일을 만들고 그안에 함수를 작성한다. 파일안에 useState, useEffect, useReducer, useCallback등 Hooks를 사용하여 원하는 기능을 구현해주고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다. useInputs..

Study #19 까지의 상태관리는 어떻게 해왔을까? 주요 상태 업데이트 로직을 App 컴포넌트 내부에서 이루어왔다 상태를 업데이트 할 때, useState를 사용해서 새로운 상태를 설정했다. 💡useReduder? useState를 사용하여 상태를 관리하는 것이 아닌 또다른 상태관리 방법 이 Hook 함수를 사용하면 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있다. 심지어 다른 파일에 상테 업데이트 로직을 작성한 후, 사용할 수 있다. 💡reducer? 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reduer(state, action) { // 새로운 상태를 만드는 로직 // const ..

💡React.memo? 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능을 최적화 시켜주는 함수! 이 함수를 사용하면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄 수 있다. 사용법은 그냥 감싸주면 됨! CreateUser.js 에 적용 // 컴포넌트 리렌더링 방지를 위한 React.memo export default React.memo(CreateUser); 왕 쉬움! UserList.js 에 적용 import React, {useEffect} from 'react' // user리스트들이 보여지는 부분 const User = React.memo(function User({user, onRemove, onToggle}) { return( onT..

💡useCallback useCallback은 useMemo와 비슷한 Hook useMemo는 특정 결과값을 재사용 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 이전에 App.js 에서 구현했던 onCreate, onRemove, onToggle 함수를 확인해보자 const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출..

💡 useMemo? 성능 최적화를 위하여 연산된 값을 useMemo 라는 Hook 을 사용하여 재사용한다. 첫번째 파라미터 : 어떻게 연산할지 정의하는 함수 두번째 파라미터 : deps 배열 , 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다. countActiveUsers라는 함수를 만들고 active값이 true인 사용자의 수를 세어서 화면에 렌더링 해보자! App.js import React,{useRef, useState} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; // 활성 사용자 ..

이번 포스팅은 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때(사라질때), 그리고 업데이트 될때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법에 대한 것이다! 1️⃣ 마운트 / 언마운트 import React, {useEffect} from 'react' // useEffect 불러오기 function User({user, onRemove, onToggle}) { // useEffect 사용! useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return() => { console.log('컴포넌트가 화면에서 사라짐'); } },[]); return( onToggle(user.id)} >{user...

#12 배열에 항목 추가 , #13 배열의 항목 삭제에 이어서 하는 배열 항목 수정하기이다! User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌는 기능을 구현해보자! 1️⃣ App 컴포넌트의 users 배열 안의 객체 안에 active라는 속성 추가 App.js import React,{useRef, useState} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }) const {username, email}..

저번 포스팅에서 배열에 항목 추가하기에 이어, 항목을 제거하는 기능을 구현해보겠다! 1️⃣ 삭제 버튼 렌더링 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 () => onRemove(user.id) : User컴포넌트의 삭제 버튼이 클릭 될 때, user.id값을 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어서 호출..