성능 최적화를 위해 사용하는 useMemo() 함수를 사용해보자.useMemo의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고, 두번째 파라미터에는 deps배열을 넣어주면 되는데, 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값

함수형 컴포넌트는 렌더링 된 값을 고정시킨다.이게 무슨 소리인가? 아래의 예제를 보면서 확인해보자.위는 함수형 컴포넌트이며 아래는 클래스형 컴포넌트이다.이 두개는 겉으로 보기에는 완전히 똑같아 보인다. 하지만 실행을 시켜보면 완전히 다른 것 알고 있는가?위 그림을 보면

이 두가지 함수에 대해서 고찰을 가져보자. 일반적으로 두 훅(Hook)을 많이 볼 수 있는데, 컴포넌트에 무언가 함수를 전달할 때마다 useCallback()함수를 호출 하는 것 같지만, 렌더링 시간에 문제를 일으킬 수 있다.useCallback()함수를 이용하면 일반

React에서는 일반적으로 DOM 요소에 id를 달지 않는다.id를 달아버리면 컴포넌트를 여러번 사용할때 id가 겹치는 문제가 발생할 수 있다.하지만, React에서는 항상 답을 찾습니다. DOM 내부에 이름을 별개로 달아주는 방법이 있고 그게 ref개념입니다.ref를

React 에서 사용하는 JSX는 DOM요소를 단순히 렌더링 하는 긴으 외에도 자바스크립트 표현식을 쓸 수 있다. 아래의 예시를 보자let 은 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드입니다. const는 한번 지정하고 나면 변경이 불가능한 상수를 선

리액트 앱을 구성하는 가장 작은 블록들을 말합니다. Virtual DOM에 존재하는 Element를 말하며, 화면에 표시되는 자바스크립트 내용들을 담고 있다. (DOM Element는 우리가 화면에서 볼때의 Element를 말한다.)코드 내에서는 일반적으로 자바스크립트

react공부를 하기 전에 기초적인 개념만 몇가지 정리하고 가자.SPASingle Page Application의 약자로 동적인 콘텐츠를 넣는 개념이다.위 그림을 보면 쉽게 이해할 수 있는데, 한개 페이지에서 일부분만 필요에 의해서 content를 로딩하는 방식으로