💻 useEffect 활용법 ❗ 의존성 배열은 잘못 입력 시, 버그로 이어질 수 있어 되도록 사용하지 않는 것을 권장 💡 useEffect 내에서 사용되는 값은 의존성배열에 추가해주어야 변경사항이 적용됨. function Profile({ userId }) { const [user, setUser] = useState(); useEffect(() => { fetchUser(userId).then(data => setUser(data)); }, [userId]); } 💡 마운트 시점에만 실행되기 원한 다면 별도의 훅으로 사용하면 더 직관적이라는 장점이 있습니다. function Profile({ userId }) { const [user, setUser] = useState(); useOnMounted((..

📍 훅 규칙 💡 훅 사용 순서는 늘 같아야 함 👉 if문 for문 등에 넣어 조건적으로 호출되면 안 됩니다. 👉 if 문 return 뒤에 사용도 마찬가지입니다. 💡 함수형 컴포넌트나 커스텀 훅에서만 호출 가능 📍 Context API 속성 값을 하위 컴포넌트로 넘겨 사용할 경우, 컴포넌트 트리가 깊다면 속성값을 여러 컴포넌트에 걸쳐 넘겨줘야 하는 불편함이 있습니다. 이를 해결할 수 있는 방법으로 context API가 있습니다. import React, {useContext, createContext } from 'react'; const UserContext = createContext('unknown'); export default function App() { return ( 상단 메뉴 하단 메뉴..

💻 가상돔 매번 돔을 새로 반영하는 것은 비효율적이기에, 가상돔이 사용되는데요. 가상돔을 두어 이전과 비교한 다음에 "변경부분만 돔에 반영"되도록 해줍니다. 📍 JSX 리액트 요소트리 Json타입으로 컴포넌트에 key가 할당되고, 해당 값이 변경될때마다 초기화되어, unmount mount가 진행됩니다. JSX-> 리액트 요소 트리 : 화면의 한 순간을 나타내주는 가상돔으로 사용. { type: 'a' or Component함수, // Dom은 문자열, 컴포넌트는 함수 이름이 들어간다. key: key에 지정된 값, ref: '', props: { children, 다른 속성 키: 값 } //... } 📍 가상돔 렌더, 실제 돔 커밋 💡 렌더단계 렌더링마다 가상돔 만들어지고, 이전과 비교 💡 커밋단계 실..

리액트를 개발하면서 이론적인 내용들과 기초가 부족하다고 느껴져서 리액트 공부를 시작했습니다👍 강의는 인프런 "실전 리액트 프로그래밍"을 수강하면서 내용을 정리하는 포스팅을 작성하려 합니다. 👉 리액트 코드의 특징 일반 JS코드와 리액트를 사용한 코드를 비교해보면 아래와 같습니다. 🔹 일반 JS /*UI 구현코드*/ 추가 🔹 리액트 import React, { useState } from 'react'; export default function App(){ const [todoList, setTodoList]= useState([]); const [desc, setDesc]= useState([]); function onAdd(){/*생략 */} return( {/*UI 구현코드*/} {setDesc(e..

안녕하세요. 이번 포스팅에서는 제가 지금 참여하고 있는 우아한 테크러닝 4기에서 들었던 강의 내용을 다뤄보려 합니다! 이번 강의에서는 redux를 javaScript를 이용하여 간단하게 구현하면서, redux에 대한 개념을 깊이 배워볼 수 있었습니다. 💻 리덕스(redux)란? 제가 생각한 리덕스는 간단하게 정의해보면 "외부에서도 전역적으로 상태관리를 가능하게 해주는 라이브러리"라고 볼 수 있을 것 같아요. 아래 그림처럼, 하나의 리덕스 store라는 곳에 상태 값들을 저장해 두고 외부 컴포넌트에서 접근할 수 있도록 하는 시스템이죠. 간단하게 리덕스에 대해 정리를 하고, 구현으로 넘어가 보겠습니다. 먼저 리덕스에서 사용되는 주 용어는 다음과 같습니다. 🔸 스토어 (Store) 상태 값들을 저장해두는 공간..

저는 이번 우아한테크러닝 4기 : 나만의 노션 만들기 (feat.시니어봇)에 운이 좋게 참여하게 되었어요 이 노션 프로젝트는 리액트 typescript를 이용하여 진행되는데 typescript는 처음이라 많이 어색하더라구요 해당 프로젝트에서는 로그인 기능을 구글 인증 API인 Oauth2를 이용하기로 결정되어서 구현한 내용을 토대로 포스팅을 해보려합니다 :-D 먼저 구글 Oauth2 의 document는 아래 링크에서 자세히 볼 수 있어요. https://developers.google.com/identity/protocols/oauth2 OAuth 2.0을 사용하여 Google API에 액세스 | Google ID 플랫폼 | Google Developers 참고 : Google의 OAuth 2.0 구현..