즐코

useMemo 와 용도는 동일하다. https://yjleekr.tistory.com/68 다른 점은 useMemo는 내부의 콜백함수가 리턴하는 값을 메모이제이션 해주는 반면, useCallback은 콜백함수 자체를 메모이제이션 해준다. 아래 예시처럼, 함수 자체를 메모이제이션 해두고, 함수가 필요할때마다 새로 생성하는 게 아니라, 메모리에 저장해두고 필요할때마다 재사용할 수 있게 도와준다. 따라서, 함수형 컴포넌트 내에서 다른 값이 변경되어 컴포넌트가 재렌더링되어도 저 useCallback 으로 감싸고 있는 함수는 다시 생성되지 않고, 이전에 메모이제이션해둔 함수를 가져와서 쓰는 거다. 다만, 두번째 인자로 들어가는 의존성 배열의 값이 변경될때만 함수가 재선언된다. const calculate = us..

useMemo 컴포넌트 성능 끌어올리기에 쓰인다! useMemo => Memoization에서 따온 말이다. 메모이제이션이란!? 동일한 값을 반복적으로 호출해야한다면 맨 처음 값을 계산할 때 그 해당 값을 메모리에 저장해서 필요할 때마다 메모리에서 꺼내서 재사용하여 쓸데없이 반복되는 계산을 막아주는 기법이다. 자주 필요한 값을 맨 처음 계산할 때 캐싱해둬서 값이 필요할 때마다 꺼내서 사용한다는 뜻 함수형 컴포넌트는 말그대로 함수이기 때문에 컴포넌트가 매번 렌더링 될때마다 함수가 호출되고, 그 안의 모든 변수들도 초기화 된다는 뜻이다. 따라서, 그 안에서 무의미하게 반복적으로 실행되는 값이 있다면, useMemo를 사용해서 메모이제이션을 해주면 효율적이겠다. useMemo는 처음에 계산된 결과값을 메모리에..

redux라이브러리를 사용하겠지만,, contextAPI 복습을 해보았다. 원래 context는 Redux에서 나온 개념인데, redux 만든 사람이 react팀으로 가면서 해당 context API 를 만들었다는 얘기가 있다. 암튼, 전역적으로 여러 컴포넌트 내에서 쓰일 데이터가 있다면 이 context API를 사용하는 게 좋다. ex) 로그인한 사용자 정보, 페이지 테마 (다크/라이트모드), 사용언어 등등.. 자세히 예를 들자면, App -> Toolbar -> ThemeButton 이런식으로 컴포넌트들이 있고, ThemeButton만 App의 특정 props가 필요하다고 가정한다. 이 때, context API 가 없었다면, props 가 필요없는 Toolbar 컴포넌트가 쓸데없이 그 prop..

useRef 에 대해서 애매한 부분이 있어 다시 공부해보았다. DOM 요소에 접근할때만 사용한다 생각했는데, 다시 공부해보니 값 변경 시 불필요한 렌더링을 발생시키지 말아야할 경우 (뭔가 굉장히 자주 바뀌는 값이 있을 때) state 대신 사용하면 매우 유용할 것 같다. const ref = useRef(value) {current:value} 객체를 반환해준다. 반환된 ref 는 컴포넌트의 생애주기 동안 유지가 되서 컴포넌트가 계속해서 렌더링이 되어도 일반 변수와 다르게 초기화가 되지 않고, unmount되기 전까지는 값을 그대로 유지할수있다. 1- 어떤 값을 저장해두는 저장공간으로써 사용 state 변화 => 새로 컴포넌트 렌더링 => 함수형 컴포넌트 내부의 함수들이 다시 호출되고 그 내부의 변수들도..

첫번째 인자인 콜백함수만 들어가면 ? 1/ 컴포넌트가 첫 렌더링 될때 useEffect의 콜백함수가 실행 2/ 화면 안의 모든 컴포넌트들이 변경될때마다 useEffect의 콜백함수가 실행됨 useEffect(() => { console.log('hi Effect') }) 두번째 인자로 배열이 들어간다면? (dependency array) 1/ 컴포넌트가 첫 렌더링 될때 useEffect의 콜백함수가 실행 2/ 배열안에는 상태나 props가 들어가는데, 이 특정값이 업데이트 될 때마다 useEffect의 콜백함수가 실행됨 마치 componentDidUpdate와 유사하다. const [count, setCount] = useState(0); const [input, setInput] = useState('..

action이 reducer에게 dispatch되기 전 추가적인 작업을 할 수 있게 해주는 게 미들웨어 쉽게 말하자면, action이 reducer-store에 가기 전 중간에 실행하는 함수들의 모음을 미들웨어라고 본다. 리액트 앱에서 back 서버에 axios요청을 날리거나 할 때 리덕스 미들웨어를 사용해서 처리하곤 한다. 액션 -> 미들웨어1 -> next -> 미들웨어2 -> next -> 리듀서 -> 스토어 미들웨어 템플릿은 아래와 같이 두 개의 함수를 연달아서 리턴해주는 고차함수이다. function middleware(store) { return function (next) { return function (action) { // 작업~~ } } } 두 개의 익명함수를 리턴하기때문에 대부분 ..

1. react router 만들기 2. redux 맛보기 1. react router 만들기 1. react-router-dom : 클라이언트의 URL 요청에 따라 페이지를 렌더해주기 위한 모듈 (SPA를 위한 react 이므로 새로운 페이지를 렌더할 때 새로고침이 아닌 한 화면에서 데이터만 바꿔주는 형태이다) npm install react-router-dom 로 설치 2. BrowserRouter / Link / Routes / Route 라우터를 react-router-dom에서 가져온다. - BrowserRouter : 최상위 컴포넌트로서 history API를 사용하여 url 과 ui를 동기화하는 라우터 - Link : A 태그 대신 써야하는 컴포넌트 (to 속성에 설정된 링크로 이동 / hi..

데이터가 바뀌면 화면(컴포넌트)이 바뀐다. 데이터가 추가/삭제/수정된 거를 알아채서 그 컴포넌트만을 바꿔준다. 원래는 props를 쓰려면 아래처럼 constructor로 props라는 인자를 React객체로부터 받아와야하는데 생략이 가능해서 엥간하면 생략한다. props는 부모 (상위) 엘리먼트가 물려준 속성값이라고 생각하면 된다. 나중에 html태그의 속성값과 헷갈리면 안된다. Input에서 this.props를 출력해보면 아래와 같이 객체가 전달된다. App이라는 컴포넌트가 Input 하위 컴포넌트에 객체형태의 데이터를 전달해준거고, Input 컴포넌트가 그걸 받아서 value로 써먹은 거다 state : 내 컴포넌트 안에 저장된 데이터를 담은 객체 한 컴포넌트 클래스나 함수 내에서 하나밖에 쓰지 못..

리액트 JS라이브러리 아래의 cdn을 넣어주면 바로 react와 babel을 쓸 수 있다. react : 리액트가 동작하는 핵심적인 코드가 들어있다. react-dom : 바뀐 값을 찾아서 그 영역만 바꿔주는 걸 도와주는 역할, 리액트 코드를 웹에다가 붙여주는 역할 리액트로 엘리먼트 생성 React.createElement(인자 3개) 1/ element명 2/ 속성값 : 여러 속성값 넣을 땐 객체 형태로 넣는다. {id:'ingoo', class:'ingclass'} 이벤트핸들러를 넣어주고싶다면 카멜케이스로 넣어줘야한다. (onClick 이렇게) 3/ innertext,innerHTML 같이 태그 안에 들어갈 내용들 // 속성값이 없을 때 const btn = React.createElement('bu..