말은 쉽지, 코드를 보여줘!

useEffect 함수를 통해 함수형 컴포넌트가 업데이트 될때마다 특정 작업을 수행할 수 있다. 예를 들어 컴포넌트 초기렌더링 시 필요한 상태값을 생성할 수 있다. 첫번째 인자의 함수 내부 로직으로 렌더링시 수행할 작업을 정의할 수 있고 해당 함수의 리턴값으로 업데이트 or 언마운트시 수행할 작업을 정의할 수 있다. 참고로 첫번째 인자의 return 은 선택적으로 정의할 수 있는데 초기상태값이 특정 조건에 따라 다르게 할당되어야 한다면 return 에 반드시 상태값을 초기화하는 디스패치 로직이 추가되어야 한다. 그렇지 않으면 컴포넌트 렌더링시 아주 짧은 시간동안 이전 상태값이 나타나는 깜빡임 현상이 발생한다. 사용법은 대략 아래와 같은데 리덕스를 사용하는 환경에서 dispatch(getTodos());로..

findmypiece.tistory.com/16?category=966881 코드 스플리팅(spliting) 리액프 프로젝트를 실제 서버에 배포할 때는 별도의 빌드 작업을 거쳐야 한다. 자바스크립트 파일 안에서 불필요한 주석, 경고메시지, 공백 등을 제거해서 파일의 크기를 최소화하고 jsx문법이 findmypiece.tistory.com 위에서 포스팅 했듯이 리액트 빌드시 웹팩에서 기본적인 코드 스플리팅은 해주지만 프로젝트에서 작성하는 코드들도 한 파일로 합쳐지지 않도록 코드 스플리팅이 필요하다. 그 방법으로 컴포넌트 자체를 지연로딩 하는 방법이 있다. 이를 통해 초기 렌더링에 필요없는 컴포넌트들은 로딩 하지 않아 로딩시간도 짧아지고 트래픽도 절약할 수 있다. 그리고 이렇게 지연로딩 되는 컴포넌트는 웹팩..

콜백함수는 비동기 작업에서 많이 사용되는데 결과에 따라 추가 작업을 해야 하는데 시간이 오래 걸리는 A라는 함수를 호출해야 할 경우 작업이 끝나면 호출할 B함수를 인자에 할당해서 비동기 호출을 해놓고 결과를 기다리지 않고 다른 일을 한다. 그럼 A함수는 작업이 끝나면 인자로 받은 B함수를 실행해서 작업이 끝났음을 알린다. ​ 여기에서 B함수가 바로 콜백함수이다. call back 은 "전화를 해왔던 사람에게 다시 전화하다" 라는 뜻인데 위 상황만 보면 콜백함수의 "콜백"도 이대로 해석해도 무리는 없다. 하지만 실제로 콜백함수는 위와 같이 단순히 작업이 끝났음을 알리기 보다 작업결과를 이용해서 추가작업을 수행하기 때문에 콜에프터(call after) 함수라고도 불린다. ​ 어쨌든 너무 복잡하게 생각하지 말..

리액프 프로젝트를 실제 서버에 배포할 때는 별도의 빌드 작업을 거쳐야 한다. 자바스크립트 파일 안에서 불필요한 주석, 경고메시지, 공백 등을 제거해서 파일의 크기를 최소화하고 jsx문법이나 es6 같은 최신 자바스크립트 문법이 브라우저에서 원할하게 동작하도록 트랜스파일 작업을 하기도 한다. 일반적으로 이 작업은 웹팩(webpack)이라는 도구가 담당하는데 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일과 CSS 파일이 각각 하나의 파일로 합쳐진다. 그런데 CRA(create-react-app)로 생성한 프로젝트의 경우 SplitChunks 라는 기능이 적용되어 있어 빌드시 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 분..

json-server는 간단하게 REST API서버를 구축해주는 라이브러리이다. 상용서비스 용도는 아니고 테스트 용도로 사용하기에 적합하다. 왠지 추후 테스트코드 작성시에도 활용할 수 있을 것 같다. 아래와 같이 json-server 를 설치한다. nvm 을 사용할 경우 제대로 동작하지 않을 수 있다고 하는데 난 문제없이 잘 되었다. 혹시 잘 안된다면 npm i -g json-server 로 설치하자. yarn global add json-server src 디렉토리 하위에 특정 디렉토리를 생성한다. 여기에서는 fake-server 라는 디렉토리를 생성한다. 디렉토리 하위에 todosRest.json 파일을 생성하고 아래와 같이 입력한다. { "todos": [ { "id": 1, "text": "리덕스..

더 좋은 방법도 많겠지만 나는 아래와 같이 사용하고 있다. └── src ├── components ├── containers ├── lib │ ├── redux │ ├── rest │ └── utils └── pages src/components 상태 관리가 이루어지지 않고 그저 props를 받아와서 화면에 UI로 나타나는 프레젠테이셔널 컴포넌트 생성 src/containers 리덕스와 연동되어 리덕스 스토어에서 상태값을 구독하고 디스패치 함수를 정의하는 컨테이너 컴포넌트 생성. 구독한 상태값과 디스패치 함수는 프레젠테이셔널 컴포넌트 에 props로 전달되어 각각 동적데이터를 데이터를 완성하거나 이벤트 함수에 연결된다. src/lib/redux 기능별로 액션 타입, 액션 생성 함수, 리듀서, 사가 코드..

1. NVM(Node Version Manager) 설치 sdkman 과 비슷하게 node 버전을 관리해주는 툴이다. 설치는 아래 공식 github 에 나온 방법을 참고하면 된다. https://github.com/nvm-sh/nvm nvm-sh/nvm Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm github.com 그런데 실제로 설치해도 아래 명령어가 인식되지 않는 경우가 있다. nvm --version 환경변수가 적용되지 않았기 때문인데 이는 아래를 참고하도록 한다. findmypiece.tistory.com/12 맥북에서 환경변수, PATH 가 자꾸 초기..

컴포넌트 성능 저하는 일반적으로 불필요한 컴포넌트 리렌더링 때문에 발생하는데 리렌더링 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6. useSelector 로 구독하는 값이 변경되었을 때 ​ 1, 2번은 변경된 상태에 따라 컴포넌트도 변화해야 하기 때문에 당연히 리렌더링 해야 하고 4번은 필요에 의해 강제로 리렌더링을 수행시키는 것이기 때문에 최대한 지양하면 된다. ​ 그런데 3번을 보면 부모컨포넌트가 리렌더링 된다고 해도 어떤 자식 컴포넌트는 변경되는 것이 없이 때문에 리렌더링이 필요하지 않을 수 있다. 바로 부모 컴포넌트에서 받아오는 props 가 바뀌지 않은 경우..

1. 함수형 컴포넌트에서 DOM을 직접 참조할 수 있는 방법을 제공하며 전역적으로 동작하는게 아니라 컴포넌트 내부에서만 작동한다. ​ 2. 기본적인 사용법은 useRef()를 통해 ref 인스턴스를 만든 뒤에 DOM의 ref로 해당 인스턴스 변수를 지정하면 된다. ​ 3. 이렇게 ref에 연결된 DOM은 ref.current 로 접근할 수 있다. ​ 4. 주의할 점은 useRef()로 만들어지는 인스턴스는 처음에는 아무것도 참조하지 않는 undefined 상태이고 DOM의 ref 키워드로 useRef() 로 만든 변수를 지정해야 그제서야 해당 DOM을 참조하게 된다. 즉, 일단 정상적으로 초기 렌더링이 되어야 해당 DOM을 ref.current 으로 접근할 수 있다. ​ 5. 한번 연결된 ref는 Rea..

컴포넌트 리렌더링이라 함은 함수형 컴포넌트 기준 JSX문법으로 작성된 view를 리턴하는 함수가 다시 수행되는 거라고 생각하면 된다. 그렇다면 컴포넌트 업데이트는 뭘까? 결국 같은 말 아닌가? 업데이트가 결국 리렌더링으로 연결되기 때문에 그냥 비슷한 의미로 해석하고 있었으나 가끔 이를 혼용해서 쓰는 글들이 보이기 시작하니 좀 헷갈려서 정리해놓는다. ​ 일단 업데이트가 더 큰 의미로 말그대로 컴포넌트가 업데이트되는 것을 말하고 그 과정에 리렌더링이 발생한다. 즉, 순서상 업데이트->리렌더링 이 된다. ​ 컴포넌트가 업데이트 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6...