💻 리덕스 란? 상태관리 라이브러리입니다. 자세한 내용은 이전 포스팅에서 다뤘기에 생략하겠습니다. https://keeper.tistory.com/27 [우아한 테크러닝 4기] redux 구현해보기 안녕하세요. 이번 포스팅에서는 제가 지금 참여하고 있는 우아한 테크러닝 4기에서 들었던 강의 내용을 다뤄보려 합니다! 이번 강의에서는 redux를 javaScript를 이용하여 간단하게 구현하면서, redux keeper.tistory.com 이 리덕스 사용의 장점은 아래와 같습니다. 컴포넌트 코드로부터 상태관리 코드 분리 미들웨어를 이용한 다양한 기능 추가 - ex) redux-saga - 로컬 스토리지에 데이터 저장 및 불러오기 SSR시 데이터 전달이 간편 리덕스 상태값은 하나의 객체로 표현가능하여, 해당..

💻 useEffect 활용법 ❗ 의존성 배열은 잘못 입력 시, 버그로 이어질 수 있어 되도록 사용하지 않는 것을 권장 💡 useEffect 내에서 사용되는 값은 의존성배열에 추가해주어야 변경사항이 적용됨. function Profile({ userId }) { const [user, setUser] = useState(); useEffect(() => { fetchUser(userId).then(data => setUser(data)); }, [userId]); } import { useState, useEffect } from "react"; export default function Profile({ userId }) { const [user, setUser] = useState(); // 여기서는 ..

💻 추천하는 컴포넌트 파일 작성법 컴포넌트 파일의 상단에 속성값 타입을 상단에 작성 해주는 것이 좋습니다. 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.target.value)}}/> 추가 ) } 🚩 일반 JS VS 리액트 일반 JS [명령형] 리액트 [선언형] ◾데이터 변경 코드와 UI코드가 혼합 ◾ 구체적인 DOM API사용으로 DOM..