sohyeon kim

💡 리액트 공식문서 정리 : 탈출구 - Effect 의존성 제거하기effect 를 작성하면 린터는 effect 의 의존성 배열에 effect 가 읽는 모든 반응형 값(props 나 state 등)을 포함했는지 확인한다.린터에 따라 반응형 값을 의존성 배열에 포함하면 effect 가 컴포넌트의 최신 props 및 state 와 동기화 상태를 유지할 수 잇게 된다.하지만 불필요한 의존성으로 인해 effect 가 너무 자주 실행되거나 무한 루프를 생성할 때도 있다.effect 에서 불필요한 의존성을 검토하고 제거하는 방법에 대해 알아보자. 1️⃣ 의존성은 항상 코드와 일치해야 한다.effect 를 작성할 땐 먼저 effect 가 수행하기를 원하는 작업을 시작하고 중지하는 방법을 지정한다.그 다음 effect..

💡 리액트 공식문서 정리 : 탈출구 - 반응형 Effect 의 생명주기, Effect 에서 이벤트 분리하기 1. 반응형 Effect 의 생명주기 : 동기화 시작 & 중지Effect 는 컴포넌트와 다른 생명주기를 가진다. 컴포넌트는 마운트/업데이트/마운트 해제의 생명주기를 가지지만,Effect 는 동기화를 시작하거나 중지하는 두 가지 작업만 할 수 있다. 다음 Effect 는 roomId prop 값에 의존한다. roomId 가 변경되면 Effect 가 다시 동기화(및 서버에 다시 연결)한다.function ChatRoom({ roomId }) { useEffect(() => { const connection = createConnection(serverUrl, roomId); // 동기화 시작 ..

💡 리액트 공식문서 정리 : 탈출구 - Effect 로 값 동기화하기, Effect 가 필요하지 않은 경우 1. Effect 로 값 동기화하기 : 컴포넌트를 외부 시스템과 동기화하는 방법이벤트 핸들러와 달리 Effect 를 사용하면 렌더링 후에 코드를 실행해 React 외부의 시스템과 컴포넌트를 동기화할 수 있다.e.g. 채팅 서버에 대한 연결 설정, 컴포넌트가 화면에 나타났을 때 분석 로그 전송 Effect 란 무엇이고 이벤트와 어떻게 다른가?우선 컴포넌트 내부의 2가지 로직 유형에 대해 알아보자.렌더링 코드를 주관하는 로직컴포넌트 최상단에 위치props 와 state 를 적절히 변형해 결과적으로 JSX 를 반환렌더링 코드 로직은 순수해야 함수학 공식과 같이 결과만 계산해야 하고, 그 외엔 아무것도 ..

💡 리액트 공식문서 정리 : State 관리하기 - State 로직을 리듀서로 작성하기, Context 를 사용해 데이터를 깊게 전달하기, Reducer 와 Context 로 앱 확장하기 5.  State 로직을 reducer 로 작성하기 여러 이벤트 핸들러를 통해 많은 state 업데이트가 이루어지는 컴포넌트는 관리하기 어려울 수 있다.이를 위해 컴포넌트 외부에서 'reducer'라는 단일 함수를 사용해 모든 state 업데이트 로직을 통합할 수 있다.이벤트 핸들러는 오로지 사용자의 'action'만을 명시하므로 간결해진다. reducer 를 사용해 state 로직 통합하기아래의 TaskApp 컴포넌트는 state 에 tasks 배열을 보유하고 있고, 세 가지 이벤트 핸들러를 통해 task 를 추가,..

💡 리액트 공식문서 정리 : State 관리하기 - 컴포넌트 간 State 공유하기, State 를 보존하고 초기화하기 3. 컴포넌트 간 State 공유하기 : state 를 부모 컴포넌트로 끌어올려 props 로 내려준다.두 컴포넌트의 state 가 항상 함께 변경되기를 원할 때➡️ 각 컴포넌트에서 state 를 제거하고 가장 가까운 공통 부모 컴포넌트로 옮겨 props 로 전달한다. 아래에서 각 패널은 독립적인 state 를 가지고 있어 show 버튼을 눌러도 다른 패널에 영향을 미치지 않는다.function Panel({ title, children }) { // 비제어 컴포넌트. 부모로무터 제어되지 않는다. const [isActive, setIsActive] = useState(false);..

📝 문제이번에는 학생들을 더욱 효율적으로 관리하기 위해 학생마다 고유한 학생 번호를 부여하기로 하였다. 학생 번호는 0부터 9 사이의 숫자로 이루어진 문자열로, 모든 학생들의 학생 번호는 서로 다르지만 그 길이는 모두 같다.학생들의 번호를 부여해 놓고 보니, 김진영 조교는 어쩌면 번호가 지나치게 긴 것은 아닌가 싶은 생각이 들었다. 예를 들어 아래와 같은 7자리의 학생 번호를 보자.오민식1212345김형택1212356이동호0033445 이처럼 학생 번호를 굳이 7자리로 하지 않고, 뒤에서 세 자리만을 추려서 남겨 놓아도 모든 학생들의 학생 번호를 서로 다르게 만들 수 있다.오민식345김형택356이동호445 하지만 세 자리보다 적게 남겨 놓아서는 모든 학생들의 학생 번호를 서로 다르게 만들 수 없다.학생..

💡 MUI & Shadcn UI 중 design system 선택하기 🔵 MUI : Google의 Material Design 가이드라인을 기반으로 한 React UI 라이브러리Material Design 기반 : 구글의 디자인 가이드 라인을 기반으로 한 스타일링으로, 일관되고 직관적인 UI 구현 가능컴포넌트 중심 : 버튼, 네비게이션 바 등 다양한 사전 정의된 컴포넌트 제공CSS-in-JS 방식 : 기본적으로 @emotion/react를 사용하여 CSS-in-JS 스타일링 제공반응형 디자인 지원 : 반응형 그리드 시스템과 스타일링 도구를 제공하여 다양한 화면 크기의 애플리케이션을 쉽게 구축 가능많은 컴포넌트가 준비되어 있어 빠른 개발이 가능하고, 유지 보수에 용이하며, 커뮤니티가 활발하지만일부 컴포..

💡Data Warehouse & Data Lake 를 비교해 보자.공통점저장소의 형태로 데이터 분석, 비즈니스 인텔리전스를 지원하는 것이 목적원본 데이터 소스로 데이터를 수집하고 저장데이터 통합과 관리를 위한 인프라 제공(구조나 활용사례에서 차이가 있다.) 데이터 웨어하우스의사결정 지원을 위한 데이터의 집합으로 기업의 핵심 데이터를 체계적으로 관리, 분석하기 위해 만들어짐전통적으로 정형 데이터(structured data)를 중심으로 구축되어 데이터의 품질과 무결성을 중요시함데이터 모델링을 통해 체계적인 데이터 구조를 만들고 ETL(Extract-Transfrom-Load) 프로세스를 거쳐 통합-정제-표준화함데이터 레이크정형 데이터뿐만 아니라 반정형, 비정형 데이터와 같은 모든 유형의 데이터를 통합 및..

💡 리액트 공식문서 정리 : 탈출구 - Ref 로 값 참조하기, Ref 로 DOM 조작하기일부 컴포넌트는 React 외부의 시스템을 제어하고 동기화해야 할 수 있다.e.g. 브라우저 API 를 사용해 input 에 초점 맞추기, React 없이 구현된 비디오 플레이어 재생, 원격 서버에 연결해 메시지 수신이 장에선 React 의 '외부'로 나가 외부 시스템에 연결할 수 있는 탈출구를 배운다.* 대부분의 애플리케이션 로직과 데이터 흐름은 이러한 기능에 의존해선 안된다. 1. Ref 로 값 참조하기 : 다시 렌더링하지 않고 정보를 '기억'하는 방법컴포넌트 내 데이터를 유지하고 싶지만, 렌더링은 일으키고 싶지 않다면 ref 를 사용하자.state 처럼 ref 로 값을 유지할 수 있다. 다만 state 는 리..

💡 리액트 공식문서 정리 : State 관리하기 - State 를 사용해 Input 다루기, State 구조 선택하기애플리케이션이 커짐에 따라 state 가 어떻게 구성되는지, 데이터가 컴포넌트 간에 어떻게 흐르는지에 대해 파악해두면 도움이 된다.불필요하거나 중복된 state 는 버그의 흔한 원인.state 를 잘 구성하는 방법, state 업데이트 로직을 유지 보수 가능하게 관리하는 방법,멀리 있는 컴포넌트 간의 state 공유 방법에 대해 알아보자. 1. State 를 사용해 input 다루기 : 선언형 UI, 선언형 프로그래밍UI를 세밀하게 직접 조작하는 것(명령형)이 아니라 각각의 시각적 state로 UI를 묘사하는 것을 의미.React 에서는 (코드로) UI 를 직접 조작할 필요가 없다. 대신..