두 손끝의 창조자

기본값으로 컨텍스트 패스는 root이다. 만약 스프링부트 또는 WAS에 war를 디플로이 할 때 루트패스가 아니라면 경로가 맞지 않아 404 응답이 반환된다. package.json 파일에 homepage 속성으로 패스를 변경할 수 있다. 내부 js에서 참조하는 패스에 해당 속성의 값을 덧붙여서 요청하기 때문에 컨텍스트 패스를 변경한 것처럼 느껴진다. 예) "homepage": "/doraemi"

useEffect 함수 내부에서 반환하는 함수는 클린업 함수라고 한다. 클린업 함수는 컴포넌트가 언마운트 될 때 호출된다. 불필요한 자원해제 등을 위해 쓴다. 컴포넌트가 마운트 됐을 때 호출되는 함수를 정의하기 위해서는 useEffect 두 번째 파라미터에 [] 빈 배열을 넣는다. 이 빈 배열을 넣은 useEffect 함수에서 반환하는 함수가 컴포넌트 클린업 함수이다.

json 파일에 키 정의할 때 {{ key }} 형태로 치환할 변수를 정의할 수 있다. { "key": "{{value}}" } 사용하는 방법은 t 함수 호출시 두번째 인자에 매핑정보를 추가한다. t('key', { value: '값값값'});

React의 Context API는 컴포넌트 트리 전체에 걸쳐 데이터를 공유할 수 있게 해줍니다. 이는 전역 상태를 관리하는 수단으로 널리 사용되며, 주로 로그인 정보, UI 테마, 언어 등을 설정하는데 쓰입니다. 본문에서는 Context의 정의, Provider와 Consumer의 관계, 사용법, 그리고 동적으로 Context의 값을 변경하는 방법에 대해 알아보겠습니다. Context의 정의 먼저, Context API는 React의 부분이며, 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있게 해줍니다. 이를 사용하면, 중간에 있는 컴포넌트들을 건너뛰고 바로 자식 컴포넌트에게 데이터를 전달할 수 있습니다. 이는 prop drilling 문제를 해결하는데 도움을 줍니다. Provider와 Cons..

useEffect 훅을 이용해서 컴포넌트가 처음 로딩될 때 무언가 작업을 하려면 useEffect(() => { console.log('~~~~') }, []);이처럼 두번째 바라미터에 빈 배열을 전달해서 사용한다. 그런데 이게 두번씩 호출 될때가 있다. 상위 컴포넌트의 의해서 두번로딩될 수 도 있지만 React.StrictMode 인 경우도 두번 호출이 된다. React.StrictMode는 보통 index.js 에 컴포넌트가 추가되어 있으니 불필요하다고 판단될때는 제거해서 테스트 해보자.

리액트 컴포넌트는 상위 컴포넌트에서 넘겨준 props로 데이터를 받아 로직을 처리하는 형태가 대부분이다. 상위 컴포넌트의 매소드를 호출하려면 props로 넘겨받은 함수 변수를 실행해서 호출한다. 만약, 그 반대의 경우가 필요하다면? 즉, 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하고자 할 때는 어떻게 할까? React.forwardRef와 useImperativeHanlde을 이용하여 구현한다. 하위 컴포턴트 실행할 로직을 구현하고 ref를 노출한다. const Input = React.forwardRef((props, ref) => { const somethingToDo = () => { console.log('Do Something'); } useImperativeHandle(re..

리액트는 루트 요소에 엘리먼트가 하나가 있어야 한다. one two 이런 식에 요소 정의는 안된다. 그래서 one two 이렇게 빈 태그를 추가하여 루트요소에 하나도 오도록 조정한다. 그런데 빈 요소 추가는 불필요한 리소스 낭비이기 때문에 실제 랜더링할 때는 나오지 않도록 리엑트에서 래핑 컴포넌트를 제공한다. one two

React.memo export default React.memo(Left);형태로 정의하면 이전 props와 현재 props를 비교하여 값의 변화가 없으면 Left 컴포넌트를 다시 호출하지 않아 불필요한 리프레시를 방지한다. props에 매우 많은 값이 들어있으면 비교하는것 자체가 부하를 주기 때문에 잘 판단해야한다. 비교할 때 === 연산자로 비교한다고 보면 되는데 원시타입은 값자체가 같으면 같아도 인식하지만, 오브젝트, 함수등은 컴포넌트를 호출하는 곳에서 재실행이 됐다면 새로운 함수로 인식하게 된다. 따라서 프롭스에 함수가 있다면 그 함수를 useCallback 으로 재생성되지 않도록 조치가 필요하다. useCallback 정의한 함수를 리액트의 내부 저장 공간에 저장해서 함수 객체가 실행될 때마다..

모든 컴포넌트 재평가 후에 useEffect를 실행한다. 컴포넌트가 렌더링되는 주기 안에서 사용되어야 하는 코드가 있을 때 유용함. 의존성이 변경될 때 실행된다. useEffect 에서 사용하는 모든 것을 의존성으로 넣어야 한다. 안넣어도 되는 것은 상태 업데이트 함수 내장 API 또는 함수 (fetch(), localStorage) useEffect 외의 변수 import { useEffect, useState } from 'react'; let myTimer; const MyComponent = (props) => { const [timerIsActive, setTimerIsActive] = useState(false); const { timerDuration } = props; // ..

.env 파일은 node를 실행할 때 읽어서 앱의 환경변수값으로 쓸 수 있다. .env 파일은 node를 실행하는 디렉토리에 있어야 한다. react project에서는 빌드할 때 .env 파일을 읽어서 변수값과 소스를 묶은 후 js 파일을 만든다. 따라서 빌드할 때 환경설정 정보가 완비되어야 한다. 개발 서버에 올릴 때와 운영 서버에 올릴 때 환경 변수 값이 다른 경우 빌드 할 때 적절히 환경 변수 값을 교체한 뒤에 빌드해야한다. 환경 변수파일의 우선순위는 npm start 했을 때는 .env < .env.local < .env.development < .env.development.local 순으로 .env.development.local 파일이 가장 우선순위가 높다. npm build 했을 때는 ...

SPA 는 웹 브라우저 기준으로는 진입점이 하나이다. index.html 하나에서 여러가지 페이지를 app 이 알아서 보여준다. 앱을 개발하면서 여러가지 라우트를 설정하여 개발한다. 개발할 때는 npm 을 이용해서 테스트 해보기 때문에 브라우저에 특정 패스를 넣으면 그 위치로 잘 넘어간다. 그러나 서버에 배포를 하게되면 문제가 생긴다. 브라우저는 이 앱이 SPA 인지 아닌지 그런건 알 수 없다. 그래서 입력한 주소로 요청을 보내는데 SPA 는 진입점이 하나, 즉 엔드포인트가 하나이므로 입력한 패스에 대한 자원을 찾을 수가 없을 것이다. localhost:3000/ 는 되지만 localhost:3000/abc 는 접근할 수 없다. 그래서 서버에 설정을 별도로 해줘야하는데 서버는 모든 요청에 대해서 SPA ..

리덕스가 왜 필요한가? 리액트 컨텍스트 단점 복잡한 셋텀 및 관리 심하게 중첩된 jsx 코드가 나온다. 성능 테마, 인증 등 저빈도 업데이트는 괜찮지만 변경이 자주 일어나는 곳에는 유용하지 않다. 리덕스 작동방식 중앙 저장소 하나에 모두 관리한다. 컴포넌트는 저장소를 구독해서 상태가 변경될 때마다 알림을 받는다. 컴포넌트는 저장소에 상태 변경을 요청한다. 요청하는 것을 dispatch라고 하고 요청을 action이라고 함 Action은 리듀서에 전달된다. Action은 단순한 자바스크립트 객체이다. 리듀서는 새로운 상태를 뱉어내고 스토어에 기존 상태를 변경한다. 저장소는 구독 중인 컴포넌트에 알림을 보낸다. 컴포넌트는 새로운 상태를 받아서 렌더링한다. 컴포넌트는 저장소 데이터를 변경하지 않는다. 구성 스..