sohyeon kim

💡 리액트 공식문서 정리 : 탈출구 - 커스텀 Hook 으로 로직 재사용하기React 는 useState, useContext, useEffect 와 같은 Hook 들이 내장되어 있다.때로는 데이터를 가져오거나 사용자가 온라인 상태인지 여부를 추적하는 등 좀 더 구체적인 목적을 가진 Hook 을 원할 수 있다.이를 위해 애플리케이션의 필요에 알맞는 자신만의 커스텀 Hook 을 생성할 수 있다.앱이 성장함에 따라 이미 작성한 커스텀 Hook 을 재사용할 수 있으므로 직접 작성하는 Effect 의 수가 줄어들 것이다. 1. 커스텀 Hook : 컴포넌트간 로직 공유하기네트워크에 크게 의존하는 앱을 개발 중이라고 가정하자. 사용자가 앱을 사용하던 중 네트워크가 갑자기 사라진다면, 사용자에게 경고하고 싶을 것이..

💡 리액트 공식문서 정리 : 탈출구 - 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); // 동기화 시작 ..

💡 리액트 공식문서 정리 : 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);..

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

💡 리액트 공식문서 정리 : 상호작용성 더하기 1. 렌더링 : 컴포넌트를 화면에 표시하기 위한 준비렌더링 과정렌더링을 트리거(요청, 발동)컴포넌트를 호출해 화면에 표시할 내용을 파악, “렌더링”은 React에서 컴포넌트를 호출하는 것DOM 이 최신 센더링 출력과 일치하도록 수정컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.컴포넌트의 초기 렌더링인 경우: 루트 컴포넌트 호출 후, appendChild() DOM API 를 사용해 생성한 모든 DOM 노드를 화면에 표시컴포넌트의 state가 업데이트된 경우: state 업데이트가 일어나 렌더링을 트리거한 컴포넌트 호출 후, DOM이 최신 렌더링과 일치하도록 변경된 부분만 수정 2. 스냅샷으로서의 state : 리렌더링을 요청하면, 렌더링이 일어난 ..

💡 리액트 공식문서 정리 : UI 표현하기 1. export default : decault 키워드는 코드를 사용하는 다른 파일에서 이 함수가 주요 함수임을 알려준다.export default function Square() { return X;} SyntaxExport 구문Import 구문다른 이름으로 가져오기Defaultexport default function Button () {}import Button from './button.js';ONamedexport function Button () {}import { Button } from './button.js';X (그래서 Named import) 보편적으로, 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을..

🥵 팀 프로젝트를 하다 알게 된 Link 문제점..!  btn 을 클릭했을 때나 엔터를 눌렀을 때 form 태그에 걸어둔 함수가 실행되고,Link(btn) 을 클릭하면 페이지가 이동되도록 했는데! Link 가 먼저 실행되어 form 에 걸어둔 함수가 실행되지 않았다.그래서 반대로도 감싸보고 했지만..❗️ Link 에 onClick 도 넣어봤는데 그럼 페이지 이동이 되지 않는다.  결국 Link 는 지우고,실행 할 함수에 마지막에 navigate 를 써서 페이지 이동을 하게 했다! ➕ 버튼 태그를 Link 처럼 사용하기 : 링크 컴포넌트이지만 모양만 버튼clink me

💡 리액트에서 api 데이터를 가져와보자! import { useEffect, useState } from "react"; function JsonApp() { const [data, setData] = useState([]); {/*데이터 들어갈 곳 초기 설정*/} useEffect(() => { fetch(`https://jsonplaceholder.typicode.com/posts`) .then((response) => response.json()) .then((json) => { setData([...json]); {/*가져온 json 복사해 데이터 갱신*/} return console.log(json); }); }, []); return ( {data.map((item) => ( {/*가져온 데..