doeunn.log

🔎 useMemo ? useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나입니다. useMemo는 Memoization을 뜻합니다. ❓ Memoization Memoization(메모이제이션)은 기존에 수행한 연산의 결과값을 어딘가에 저장(캐싱)해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. → 💡 연산의 결과값을 캐싱해 두고 재사용하기 위한 훅 함수! ❓ 언제 쓰는 걸까 함수형 컴포넌트는 렌더링 → Component 함수 호출 → 모든 내부 변수 초기화 순서를 거칩니다. Component가 렌더링이 될 때마다 value라는 변수가 초기화됩니다. 따라서 calcuate 함수는 반복적으로 호출됩니다. calcuate 함수가 cost가 높은 연산..

🔎 state ? React에서 state는 내부에서 변경될 수 있는 값을 의미합니다. 따라서 컴포넌트가 렌더링 되고 난 후 값이 변경되어 재렌더링될 가능성이 있는 값들은 state로 선언합ㄴ디ㅏ. state는 값은 state함수를 통해 갈아끼워진다 이 말이 무슨 뜻인지는 코드로 알아봅시다. function Test() { const [ name, setName ] = useState(''); const settingName = () => { // name = '홍길동'; => 이렇게 사용X setName('홍길동'); } return( {name} ) } 위 코드아 같이 state값인 name을 직접적으로 바꾸지 말라는 것인데, 무조건 setName(), state함수를 통해 값을 바꿔야 한다. sta..

▶SOLID 원칙에 기초한 React 코드 작성법 용어만 들어왔던 SOLID 원칙에 대해 자세하게 정리해 보려고 합니다. React 공식문서에 React로 사고하기(https://ko.reactjs.org/docs/thinking-in-react.html)라는 단락이 있습니다. 여기에서는 프로그래밍의 유지보수성과 확장성에 도움이 되는 전략을 소개하고 있는데요. 🔎 SOLID ? SOLID는 단일 책임 원칙(SRP), 개방 폐쇠 원칙(OCP), 리스코프 치환 원칙(LSP), 인터페이스 분리 원칙(ISP), 의존관계 역전 원칙(DIP)의 다섯가지 원칙의 앞글자를 딴 명칭입니다. 공식문서에서 언급한 만큼 다섯가지 원칙에 대해 하나씩 알아보도록 하겠습니다 :) 단일 책임 원칙(Single Responsibili..

▶Outlet으로 레이아웃 구성하기 오늘은 react-router-dom의 Outlet을 이용하여 레이아웃을 구성하는 방법에 대해 알아보려고 합니다 :) 🔎 Outlet ? Outlet은 하위 경로 요소를 렌더링하기 위해 사용하는 기능으로 만약 Header, Main, Footer를 함께 보여주기 위해서는 Outlet을 사용하여 하위 경로도 함께 렌더링이 가능합니다. → Outlet의 역할 자식 요소 중에 있는 엘리먼트 중에서 들어온 url에 맞게 엘리먼트를 보여주고 컴포넌트를 가져옵니다. ❓ 그냥 화면에 띄우면 되는거 아닌가 특정 페이지들끼리만 공통적으로 보여줘야 하는 레이아웃이 있을 때는 그거에 맞게 경로를 설정해줘야 합니다. 이때 Outlet을 사용하면 편하게 레이아웃을 구성할 수 있게 됩니다. 따..

▶styled-components에서 속성값으로 스타일링 하기 이번 글에서는 styled-components에 속성값을 주면서 스타일을 속성값에 따라 다르게 주는 방법에 대해 알아보도록 하겠습니다. 🔎 이건 언제 사용? 우선 방법을 알아보기 전에 언제 사용할 수 있는지 예를 들어 이야기 해보겠습니다. 예를 들어 버튼을 눌렀을 때 컴포넌트의 background-color를 변경하고 싶을 때 많이 유용하다고 생각이 들었는데요. 이걸 모른다면 background-color 하나 때문에 스타일 컴포넌트를 하나 더 만들어야 할지도 모릅니다... 🔎 사용해보자 우선 기본적으로 코드를 아래와 같이 작성하였습니다. 단순하게 버튼을 클릭하면 form의 state를 '로그인' 또는 '회원가입'이 되도록 했습니다. impo..

▶styled-components로 React 컴포넌트를 스타일링하자 이번 글에서는 CSS-in-JS 라이브러리인 styled-components를 사용하여 React 컴포넌트를 스타일링하는 방법을 살펴보겠습니다. 🔎 CSS in JS ? 먼저 CSS in JS 개념에 대해 알아보려고 합니다. CSS in JS는 스타일 정의를 CSS 파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법을 의미합니다. HTML, CSS, Javascript는 각자 별도의 파일에 두는 것과 대비하여 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, Javascript를 몽땅 포함시키는 것인데요. React는 JSX를 사용해서 이미 Javascript가 HTML을 포함하고 있는 형태를..