이것저것 스터디📚 (107) 썸네일형 리스트형 React 공식문서 -useLayoutEffect - useLayoutEffect는 성능을 저하시킬 수 있기 때문에, 가급적 useEffect를 사용하는 것을 권장한다. - useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect이다. - 즉, 브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정한다. Mesuring layout before the browser repaints the screen(브라우저에서 화면을 다시 그리기 전 레이아웃 측정하기) - 예를들어 마우스오버 시 요소 옆에 툴팁을 표시하는 기능이 있다고 가정했을 때, 공간이 충분하면 툴팁이 요소 위에 표시되지만, 공간이 충분하지 않으면 아래에 표시되게 하고 싶을 때, useLayoutEffect를 사용할 수.. React 공식문서 -useTransition - useTransition : UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅 function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } // ... } - useTransition이 반환하는 startTransition 함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다. - useTransition은 훅이므로 컴포넌트나 커스텀 훅 내부에서만 호출할 수 있다. 만약 다른 곳(데.. DeepDive - 44장. REST API - REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API의 구성 - REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위와 구체적 내용 페이로드 44.2 REST API 설계 원칙 - 1. URI는 리소스를 표현하는데 집중한다. - 2. 행위에 대한 정의는 HTTP 요청 메서드를 통해한다. 1. URI는 리소스를 표현해야 한다. - URI는 리소스를 표현하는데 중점을 두어야 한다. - 리소스를 식별할 수 있는 이름은 동사보다는 명.. DeepDive - 43장. Ajax 43.1 Ajax란? - Ajax : 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - Ajax 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작함. - 전통방식의 문제점 - 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함한 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. - 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. - 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처.. Keep-Alive 헤더 - Keep-Alive 헤더 : 송신자가 연결에 대한 타임아웃과 요청 최대 개수를 어떻게 정했는지에 대해 나타낸다. - Keep-Alive 헤더를 위해서는 Connection 헤더는 keep-alive로 설정되어야 한다. - parameters - timeout : 유효 연결이 계속 열려 있어야 하는 최소한의 시간(초 단위)을 가리킨다. - max : 연결이 닫히기 이전에 전송될 수 있는 최대 요청 수를 가리킨다. - HTTP는 TCP 위에서 동작을 하는데, TCP 전송이 끝나면 연결이 끊어지듯이 HTTP도 서로 전송이 끝나면 연결이 끊어진다. 그렇다면 매번 똑같은 주소로 요청을 할 때마다 새로운 연결을 설정해야 한다면 자원이 낭비된다. 이런 문제를 막고자 Keep-Alive가 생겼다. Keep-Aliv.. React 공식문서 -startTransition - startTransition은 UI를 차단하지 않고 state를 업데이트할 수 있다. - 즉, startTransition 함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다. import { startTransition } from 'react'; function TabContainer() { const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } // ... } - startTransition은 트랜지션이 진행 중인지 여부를 추적하기 위한 isPending 플래그를 제공하지 않는다는 점을 제외하면 useTransition과 매우 .. React 공식문서 -forwardRef - forwardRef를 사용하면 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있다. - 즉, 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하도록 하려면 forwardRef를 사용할 수 있다. - forwardRef는 렌더링 함수를 인자로 받고, React는 props 및 ref와 함께 이 함수를 호출한다. const MyInput = forwardRef(function MyInput(props, ref) { return ( {props.label} ); }); Exposing an imperative handle instead of a DOM node(DOM 노드 대신 명령형 핸들 노출하기) - React에서 DOM 요소를 직접 노출하는 대신, 더 안전하고 추상화된 방식으로 상.. React 공식문서 -useRef - useRef : 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅 - useRef의 매개변수에는 초기값(initialValue)을 지정할 수 있는데, 이는 ref 객체의 current 프로퍼티 초기 설정값이며 어떤 유형의 값이든 지정할 수 있다. - useRef는 단일 프로퍼티를 가진 객체를 반환한다. - ref 객체를 JSX 노드의 ref 속성으로 React에 전달하면 React는 current 프로퍼티를 설정한다. - ref는 state와 달리 변경하더라도 리렌더링을 촉발하지 않는다. * 렌더링 중에는 ref.current를 쓰거나 읽지 마세요. - React는 컴포넌트의 본문이 순수 함수처럼 동작하기를 기대한다. - 입력값들(props, state, context)이 동일하면 완전히 동.. 이전 1 2 3 4 5 6 7 8 ··· 14 다음
