Front-End Developer/React

useCallback. [의존성 배열] 난 너만 바라봐

결론: [의존성 배열] 난 너만 바라봐. useCallback useCallback(() => { return value; }, [의존성배열]) const calculate = useCallback((num) => { return num + 1; }, [의존성배열] 이렇게 함수를 useCallback으로 감싸주면 이제 이 calculate라는 변수는 메모이제이션된 함수를 갖고있게된다. 이는 의존성 배열 안에있는 값이 변경될 때 에만 초기화된다. 이 useCallback이 필요한 이유를 알고 이해하기 위해 상황을 설정해보자. 상황설정 간단한다. 인풋하나와 버튼하나가 있다. 인풋값은 number만 들어간다. 그리고 useState를 사용하여 변경값을 input value에 넣어준다. 버튼의 변화를 감지하여 ..

Router v6 헷갈려서 공부해봤다. 기초정리

Router package.json 파일에 들어가 현재 라우터의 버전을 확인해보자. Router 설치하기 npm install react-router-dom@6 index.js파일에 BrowserRouter import하기 import { BrowserRouter as Router } from 'react-router-dom'; //그냥 BrowserRouter로 써도 되지만 더 짧게 쓰려고 Router로 import 기본적으로 Route를 할때는 아래의 구조를 같는다. const container = document.getElementById('root'); const root = createRoot(container); root.render( ); 만약 Router 안에 Routes와 Route를 다..

React를 한다면 무조건 알아야 할 - useRef 1편

결론: 이거 잘 외워둬라. 기본 사용법 const ref = useRef(value) //ref 안의 객체에 아래와 같은 형태로 저장이 된다. { current: value } //언제든 수정가능 ref.current = 'hello' { current. 'hello' } state와 비슷하게 저장공간으로 사용된다. DOM 요소에 접근할 수 있다. input요소를 클릭하지 않아도, 로그인화면에서 자동으로 아이디입력칸에 포커스가 되어있으면 편하겠지? Ref를 사용해서 이런작업을 편리하게 할 수 있다. 마치 JS의 document.queryselector와 같다! (2편에서 배워보자) Ref는 아무리 수정을 해도 다시 렌더링 시키지 않는다! import React, { useState, useRef } fr..

영혼없이 썼던 import React from 'react' - 안써도 된다는데?

궁금했다. create-react-app 하면 항상 맨 위에 있길래. 그래서 찾아봤다. 아~ 최상위 API구나. 그래서 항상 기본처럼 딸려있었구나. (이렇게 react 모듈을 불러와서 실행해주는건 Node.js에서 지원해줌) 그럼 이녀석이 하는 일은 뭐냐? 그건 공식문서를 보면 알 수 있다. 이 import React를 이해하려면 JSX Transform이라는걸 먼저 알아야 한다. What’s a JSX Transform? Browsers don’t understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform JSX code into regular JavaScript. Ma..

콘솔로그가 왜 두번씩 출력되는거야? - StrictMode

사건의 발단 useEffect를 배우며 마운트과정을 콘솔에 찍어보다가, 첫 마운팅시에 콘솔로그가 두 번 찍힌다는걸 발견했다. 이 이후부터는 정상적으로 한번씩 찍혀 넘어가려고 했으나 찜찜한 마음에 검색을 해 보았는데, 원인이 index.js에서 루트에 컴포넌트를 렌더링 할 때 사용하는 라는 것을 알게되었다. 원인은 StrictMode 리액트를 배운지 얼마 안되서 그동안 아무 생각없이 따라치던 녀석인데, 이녀석이 원인일 줄은 몰랐다. StrictMode 는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로서, Fragment 와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다. -> 쉽게 말해 StrictMode는 개발도중 발생하는 문제를 감지하기 위한 설정으로 Moun..

리액트.... 이미지가 액박이 뜬다고?

결론: 응 원래 하던대로 하는거 아니야 사건의 발단 리액트를 배우기 시작하고 컴포넌트들을 만들어보다가, 이미지를 추가했다. 음..맞는데? 파일경로 파일이름 다 맞는데? 아~ 리액트에서는 파일경로도 중괄호 안에 넣나보다~ 검색해보니 create-react-app과같이 핫 모듈 로딩을 제공하는 웹팩을 사용하는 경우에는 이미지를 불러오는 방법이 달랐던 것! 웹팩을 사용하고 JSX문법을 사용하는 경우에는 아래처럼 두가지 경우로 이미지를 불러올 수 있다. 해결방법 require('image').default 사용하기 검색에서는 뒤에 .default를 붙이지 않아도 잘 불러오는 것 같았는데, 나의 경우에는 .default를 붙여야만 불러왔고 그렇지 않은 경우에는 엑박이 나왔다. import해서 사용하기 파일 최상단..