log_J

✅ 왜 사용하는가?Recoil을 사용해 칸반보드를 만드는 프로젝트를 진행중이었다.atom 데이터를 LocalStorage로 저장해브라우저를 닫거나 새로고침을 해도 데이터가 유지될 수 있게 구현하고 싶었다.  1️⃣ 초기 해결방법atom.ts 파일에서 직접 LocalStorage를 연결했다.데이터 수정이 있을 때 마다 LocalStorage에 setItem을 해줬다. const initData = localStorage.getItem('to-do');export const boardState = atom({ key: 'boards', default: [], default: initData ? JSON.parse(initData) : [],});  그런데 Kanban board 특성상 추가, 삭제, 수..

✔ Vercel 이란? 💡 프론트엔드 개발자들을 위한 클라우드 서비스를 제공하고 있는 회사. React.js의 확장판 개념인 Next.js를 개발하는 회사. 호스팅 뿐만 아니라 다양한 기능을 제공하고 있고 무료 플랜에서도 많이 이용할 수 있다. Vercel로 프로젝트 배포를 해보자! 1. 회원가입 교육을 목적으로 한 개인 프로젝트 배포용으로 사용할 예정임으로 Hobby 체크. Name 칸에는 한글 입력은 불가능하다. Github 연동으로도 회원가입이 가능하다. 아무것도 원하지 않는다면 Continue with Email로 진행하면 되지만, 나는 깃허브를 연결해줬다. 이메일 연동 후 이런 화면이 떴다면, 회원가입 완료! 2. VSCode 실행하기 Build가 완료된 프로젝트 파일에 Terminal을 켜준다..

💡 useCallback ? useCallback은 React.memo, useMemo와 같이 memoization과 관련된 최적화 기능에 사용되는 React Hook이다. useMemo와 동일하게 함수형 컴포넌트 안에서만 사용 가능하다. ✅ 언제 컴포넌트의 리렌더링으로 불필요하게 함수가 재생성되는 경우, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. ✅ 어떻게? const function1 = useCallback(() => {} , [/* 의존성 배열 */] ); 의존성 배열에 변화를 감지할 인자를 전달하면, 배열 내부의 값이 바뀔 때 마다 useCallback의 첫 번째 인자인 콜백 함수를 호출해 memoization된 함수로 리턴한다. ❗ 주의 의존성 배열에 빈 배열을 전달하면 컴포..

💡 Memoization 이미 계산 해 본 연산 결과를 기억해, 재연산하지 않고 필요로 할 때 기억해둔 데이터를 반환하는 것을 말한다. 연산과정을 최적화 시킬 수 있다는 장점이 있다. 오늘 포스팅 할 React.memo와 useMemo는 모두 Memoization과 관련된 함수이다. 두 함수 모두 최적화 기능에 많이 사용된다. ✔ React의 리렌더링 조건 컴포넌트 내부의 state가 변경됐을 때 컴포넌트의 Props가 변경됐을 때 부모 컴포넌트가 리렌더링 됐을 때 리액트의 컴포넌트들은 위 세 가지 조건으로 리렌더링하게 된다. 그러나 세 가지 조건 모두 충족시키기엔 아주 쉬우며, 때때로 리렌더링이 불필요한 컴포넌트까지 실행시킨다. 혹은 너무 잦은 리렌더링으로 오래 걸리는 연산을 계속해서 반복해야하는 경우..

💡 async ? await ? ES2017에 도입된 비동기 처리 문법 Promise 로직을 더 쉽고 간결하게 사용할 수 있게 도와준다. Promise를 대체하는 기능은 아니고 보이는 문법을 다르게 하여 가독성을 높히고 유지보수가 편리하게끔 만든 문법 ✔ 사용법 function 키워드 앞에 async / 비동기 처리 앞에 await 를 붙여 사용한다. 1) async async를 붙인 함수는 promise를 리턴하는 비동기 함수가 된다. async를 붙인 함수의 return 값은 promise의 resolve 함수의 argument와 같다. /* 함수 선언식 */ async function helloAsync() { return 'hello Async' } /* 함수 표현식 */ const helloAs..

💡 콜백 지옥 (Callback Hell) ? 자바스크립트는 비동기 작업을 처리할 때, 콜백 함수를 사용한다. 만약, 비동기 작업의 결과를 가지고 콜백 내부에서 또다른 콜백 함수를 사용한다면 어떻게 될까? 위 사진처럼 콜백의 콜백이 중첩되면서 코드의 가독성이 나빠지고 유지보수도 어려워진다. 이러한 문제를 "콜백 지옥" 이라고 한다. 그렇다면 위 코드처럼 콜백지옥에서 벗어나려면 어떻게 해야하는 걸까? 💡 Promise Promise는 비동기 처리에 사용되는 객체이다. 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. ✔ Promise의 3가지 상태 프로미스는 비동기 작업의 결과를 약속한다. 프로미스 객체를 생성하면, 비동기 작업은 진행중이거나, 성공하거나, 실패..

생명주기(생애주기 - Lifecycle) 란? 💡 컴포넌트가 화면에 나타나고, 리렌더가 발생하고, 사라지기까지의 과정 탄생 Mount 컴포넌트가 화면에 나타난다. 변화 Update 컴포넌트 내부의 state가 변경 / 부모가 리렌더 / Props가 변경 등 컴포넌트 자신이 리렌더 되는 상황 리렌더 되는 과정을 업데이트(변화하는 순간)라고 함 죽음 Unmount 컴포넌트가 화면에서 사라진다. 컴포넌트 라이프사이클은 왜 알아야 할까? 컴포넌트가 mount, update, unmount 되는 순간에 어떤 작업을 수행시킬 필요가 있다. 예시) mount - 초기화 update - 해당 변화를 통해 발생할 수 있는 예외 처리 unmount - 컴포넌트가 사용하던 메모리를 반환 React를 사용해서 소프트웨어를 더..

💡 Props란 무엇인가? 부모 컴포넌트로 부터 전달받은 값. 컴포넌트의 속성(Property)를 의미한다. ✅ Props 특징 1. Readonly 상위 컴포넌트로 받은 Props는 컴포넌트에서 수정이 불가능하다. 💡 React는 단방향 데이터 흐름으로 하위 컴포넌트는 데이터를 받을 수 있지만 상위 컴포넌트에 넘길 수 없다. 만약 하위 컴포넌트에서 데이터를 수정해도 상위 컴포넌트는 이를 알 수 없기 때문에 Props는 수정이 불가하다. 2. 객체 타입이다. 컴포넌트는 반드시 1개의 argument를 갖는다. 상위 컴포넌트에서 하위 컴포넌트에 여러 Property를 넣어 전달해도 객체형태의 argument 하나만 받을 수 있다. 3. 구조분해 할당을 사용할 수 있다. Props를 구조분해 할당을 사용하면..

컴포넌트(Component)란? 리액트로 만들어진 앱을 이루는 최소한의 단위 레고 블럭을 조립하여 만들 듯이 앱을 조립하여 만들 수 있는 하나의 블럭을 '컴포넌트'라고 한다. 함수형과 클래스형 차이를 왜 알아야 하나? 클래스 스타일은 리액트의 모든 기능을 다 사용할 수 있지만, Class 라는 문법을 이해해야 하고 복잡하다. 함수형 스타일은 리액트의 제한된 기능만 사용할 수 있지만, 함수를 만들 수만 있다면 작성할 수 있고 단순하다. 💡 함수형 컴포넌트가 지원하지 않았던 기능 - state - life cycle API 📢 리액트 버전 16.8부터 Hook이 등장하면서 state, life cycle API 모두 작성 가능함 작성하기 편리하고 이제 모든 기능을 지원하는 함수형 컴포넌트만 알면되지 왜 클래..

State란? 컴포넌트 안에서 사용되는 자바스크립트 객체 일반적인 객체는 값이 변경된다고 렌더링이 발생하지 않지만, State의 값이 변경되면 렌더링이 발생한다. 즉, 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. State 사용법 - useState const로 선언한다 변수의 재할당을 막음 반드시 setState로만 state값을 변경할 수 있도록 함. 또한 setState로 값을 변경해야만 렌더링이 발생한다. setState는 카멜케이스로 쓴다 하나의 컴포넌트 내에 state는 여러개 있을 수 있다. 단, state변수명과 setState함수명은 또 다른 state와 선언명이 겹쳐선 안 된다. 💡 setState 사용하기 1. 변경할 값을 직접 넣기 const App = ..