2023/07/20 3

[React] Immersion

Immersion(불변성) 세상에 불변하는 것이 있을까요? 아마도 없을 겁니다. 아주 긴 시간 속에서는 조금이라도 변하기 마련이죠. React는 불변성이라는 개념을 가져왔습니다. 긴 시간이 아니랑 원본데이터를 보호하고, 복사를 통해 원본을 건드리지 않고 작업하도록 만든 개념입니다. 불변성이라는 것은 원본데이터의 변경을 금지하는 것 입니다. 이를 지키고자 React에서는 기존 원본데이터를 직접 수정하지 않고 새로운 데이터를 만들어서 사용합니다. const numArr = [1, 2, 3, 4, 5]; //스프레드 문법을 통한 새로운 배열 생성 const newNumArr = [...numArr]; const obj = { num1: 1, num2: 2, num3: 3 }; const newObj = { ...

[React] Component Styling

Component Styling Component Styling(컴포넌트 스타일) 컴포넌트에 스타일을 입히는 방식은 4가지 방식이 있습니다. 먼저, 일반적인 CSS 방식(외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 시트)를 사용하는 방식이 있습니다. 그 외에 SASS(Syntactically Awesome Style Sheet) 방식, CSS 모듈 방식, styled-component 방식을 주로 사용합니다. 조금 더 자세히 살펴보겠습니다. 일반적인 CSS 방식은 Html 문서에서 사용하는 Css방식과 동일한 방식으로 외부에 Css파일을 만들어서 참조하거나 인라인 스타일을 지정하거나 변수로 스타일을 지정해서 넘길 수도 있습니다. 일반적인 SASS 방식 다음으로, SASS 방식에는 CSS 전처리기..

[React] Hooks(2)

useCallback useCallback은 렌더링 성능을 최적화할 때 사용하는 Hook이라고 할 수 있습니다. 컴포넌트에 정의해놓은 메소드를 렌더링될 때마다 재생성되는데 useCallback을 이용하면 메소드들이 재생성되는 것을 방지합니다. 또한, useCallback 정의해놓은 메소드의 재사용성을 높일 수 있으며, 메소드가 생성되는 시점을 정할 수 있는 장점이 있습니다. const 메소드명 = useCallback(() => { //메소드의 동작 구현 //최초 렌더링 시에만 메소드 생성, 상태변수 값을 줘서 상태변수가 변할 때마다 메소드를 재생성 }, []); useMemo useMemo는 연산을 최적화해주는 Hook입니다. 상태값이 변할 때만 연산이 이뤄지도록 지정할 수 있어서 불필요한 연산이 일어..