💻 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((..

💻 추천하는 컴포넌트 파일 작성법 컴포넌트 파일의 상단에 속성값 타입을 상단에 작성 해주는 것이 좋습니다. MyComponent.propTypes = { //... } 💡 컴포넌트에 이름을 붙여주는 것이 디버깅할때 확인이 편함. export default function ({ prop1, prop2 }) {} 👇 export default function MyComponent({ prop1, prop2 }) {} 💡 외부 객체나 변수 같은경우는 가장 밑에 따로 작성 MyComponent.propTypes = { //... } export default function MyComponent({ prop1, prop2 }) {} const DATA = []; function setData(data) { DA..

📍 훅 규칙 💡 훅 사용 순서는 늘 같아야 함 👉 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기 : 나만의 노션 만들기 (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 구현..