sohyeon kim

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

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

💡 리액트 공식문서 정리 : 탈출구 - 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 를 직접 조작할 필요가 없다. 대신..

💡 리액트 공식문서 정리 : 상호작용성 더하기 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 방식을..