Programming/React (19) 썸네일형 리스트형 [React] 브라우저 새로고침(Refresh)시 스크롤 최상단 이동 React 프로젝트의 경우 따로 설정을 해주지 않으면 스크롤 후 새로고침하면 이전 값으로 돌아가게 된다. 해당 내용을 방지해주기 위해선 처음 렌더링이 되는 src/App.js(App.tsx)에 해당 내용을 넣어주면 된다. useEffect(() => { window.onbeforeunload = function pushRefresh() { window.scrollTo(0, 0); }; }, []); 처음 렌더링 시 scrollTo를 이용해 scrollY, scrollH 값을 0으로 옮겨주므로 최상단으로 이동하게 된다. [React] React localhost 프로젝트 핸드폰/휴대폰으로 확인하기 1. 핸드폰을 컴퓨터가 사용하는 것과 같은 WIFI를 사용해 연결한다. 2. 맥에서 terminal 오픈 후 ipconfig getifaddr en0 입력하면 나오는 IP 주소를 얻는다 3. 핸드폰에서 http://IP주소:포트번호 입력 → 확인 가능 [React/Typescript] i18next로 다국어 지원/구현하기 1. 라이브러리 설치 yarn add i18next @types/i18next react-i18next @types/react-i18next 2. 폴더구조 참고 ./src ├── index.tsx ├── app.tsx └── assets └── lang ├── i18n.ts └── lang_packs ├── en.json └── ko.json 3. i18n.ts 작성 src/assets/lang/i18n.ts import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import langEn from './lang_packs/en.json'; import langKo from './lang_packs/ko.json'; con.. [React] React Hooks : 6. useReducer 1. useReducer 란? useState와 비슷하게 상태를 관리/수정할 때 사용하는 훅이며, Context API, useContext 와 같이 사용되는 경우가 많다. // useState const [state, setState] = useState(); // 상태, 상태변환 // useReducer useReducer(reducer, initialState); // 상태변환, 상태 1) useState와의 차이점 useReducer는 더 복잡한 로직의 상태를 관리하는데 사용되는 경우가 많다. 2) useReducer를 언제 사용해야 하는가? 2-1) useState보다 더 복잡한 로직 상태 관리가 필요할 때 2-2) Redux 사용시 2. useReducer 사용하기 dispatch가 reduc.. [React] React Hooks : 5. useRef 1. useRef란? Javascript에선 특정 태그를 선택하기 위해 getElementById, querySelector와 같은 DOM Selector 함수를 사용하는데, React의 함수형 컴포넌트 내에서는 useRef를 사용한다. 현재 스크롤 바의 위치가 어디인지, 포커스 설정, 특정 엘리먼트 크기 가져오기 등의 기능 구현에 사용된다. 2. useRef 사용하기 2-1) 최상단에 useRef 선언하기 import { useRef } from 'react'; 2-2) ref 선언 후 초기화 ex) ExampleElement라는 이름의 선택자 생성 const ExampleElement = useRef(null); 2-3) useRef로 Button 이라는 내용의 div tag 클릭 시 input으로 .. [React] React Hooks : 4. useContext 먼저 Context란? [etc] Context란 무엇인가? 1. Context의 의미 사전적 의미 자체는 맥락이나 문맥을 의미하지만, 개발에서 말하는 Context의 주된 뜻은 이벤트가 일어나는 조건, 환경 등이 된다. 예를 들면, A라는 사람이 인터넷을 통해 물건을 orbit-orbit.tistory.com 1. useContext 란? 사용자가 선택한 언어, 테마, 로그인등의 인증된 사용자 속성을 전달할 경우 유용한 Hook. Context API와 함께 사용하면 앱의 모든 구성요소를 쉽게 전달할 수 있음. (전역상태관리) 1-1. Context API란? 2. useContext 사용하기 1) Hook을 사용할 context 만들기 ex) members.member1을 기본 값으로 가지는 cont.. [React] React Hooks : 3. useEffect 1. useEffect란? 클래스형 컴포넌트의 경우 componentDidMount → componentDidUpdate → componentWillUnMount로 사용되던 것을 함수형 컴포넌트에서는 useEffect를 통해 구현할 수 있다. 2. useEffect 초기 선언 import React, { useEffect } from 'react'; 3. 모든 컴포넌트가 리렌더링 될 때마다 실행하기 메모리가 과다 사용되므로 추천하지 않습니다. useEffect(() => { console.log('모든 컴포넌트가 리렌더링 될 때마다 실행됩니다.'); }); 4. 컴포넌트가 렌더링 된 이후 한 번만 실행하기 렌더링이 완료된 후 호출되며, 빈 배열을 종속시켜 한 번만 실행되도록 한다. 클래스형 컴포넌트의 c.. [React] React Hooks : 2. useState 함수형 컴포넌트를 사용하면 가장 일반적으로 사용하게 될 Hook으로서 상태 변수를 선언하고 업데이트 할 때 사용한다. 1. 초기 세팅 먼저 파일의 가장 상단에 useState Hook을 불러온다. import React, { useState } from 'react'; 2. useState를 사용해 값 생성하기 함수형으로 작성된 컴포넌트 선언 내부에서 useState를 이용하여 string 값 생성 예시 import React, { useState } from 'react'; const ExampleComponent = () => { // useState 예시 const [example, setExample] = useState("초기 값"); return( {/* useState를 사용하여 생성한 ex.. 이전 1 2 3 다음
