본문 바로가기

분류 전체보기415

컴포넌트의 생명주기(lifecycle) 최종 수정 : 2024-06-17컴포넌트의 생명주기(lifecycle)리액트에서 컴포넌트를 생성하고 렌더링하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명주기(lifecycle)이라고 표현한다. # 라이프 사이클을 공부해야 하는 이유동작을 예측가능하게 만든다.모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 이는 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사잘 때 끝난다. 라이프사이클 메서드를 통해 컴포넌트가 처음 렌더링할 때 보여주는 작업을 하거나, 컴포넌트의 값을 업데이트 하거나, 불필요한 업데이트를 방지하는 것을 수행할 수 있다. 라이프사이클 메서드의 종류는 총 9가지 이다.. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접.. 2024. 4. 20.
Link, Navigete, useNavigate의 차이점 최종 수정 : 2024-04-19 Link, Navigete, useNavigate의 차이점 Link 컴포넌트 주소는 router를 통해 설정한 경로를 작성하면 되며, 사용자가 클릭해서 페이지를 이동할 수 있도록 만든다. 클릭만 하면 이동하기 때문에 다른 연산과정 없이 URL 경로가 바뀌면서 이동다. 개발자 도구에서는 로 보인다. a태그와는 무슨 차이가 있는가? 를 사용할 경우에는 전체 페이지를 재렌더링 시키기 때문에 SPA에 맞지 않다. 브라우저 주소로 이동하고 페이지 자체를 새로고침 하는 것이다. 따라서 상태 값이 유지되지 못하므로 사용할 수 없으며 속도가 저하된다. 반면 컴포넌트는 SPA의 특성에 맞게 필요한 부분만 재렌더링된다. 필요한 부분에서만 데이터를 불러올 수 있기 때문에 속도 개선에 도움이.. 2024. 4. 19.
Tailwind CSS 최종 수정 : 2024-06-01Tailwind CSSUtility-first 라는 방법론으로 디자인을 적용하는 라이브러리 중에서 가장 널리 쓰이는 CSS 라이브러리이다. class name을 컴포넌트가 아니라 기능에 붙임으로써 CSS의 문제를 해결하려 했다. Bootstrap과 유사하게 미리 정의된 스타일 구성 요소를 가져와 사용하는 방식으로 동작한다. 대신 utility CSS이므로 필요에 따라 확장성 있게 CSS를 작성할 수 있고, 빌드 시에 사용하지 않는 클래스는 제거되어 번들 크기에 주는 영향도 줄일 수 있다. 또한, atomic한 특성으로 인해 프로젝트의 크기가 거대해져도 스타일시트의 크기가 비례해서 늘어나지 않는 이점도 있다. SSR 관점에서 중요한 건 런타임에 스타일시트를 생성하지 않고 빌.. 2024. 4. 18.
CSS-in-JS 최종 수정 : 2024-05-30CSS-in-JS자바스크립트 코드로 CSS를 작성하는 방식이다. Styled Components가 이에 해당한다.장점컴포넌트 단위로 나누어서 스타일링을 할 수 있어서 CSS 클래스 이름이 충돌하지 않는다.클래스네임을 짓지 않아도 된다.자바스크립트와 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋다. 단점 및 한계자바스크립트를 통해 CSS를 만들기 때문에 CSS나 Sass에 비해서 추가적인 연산이 발생하며, 렌더링 속도도 훨씬 느려지는 부작용이 있다.import styled from 'styled-components';const Button = styled.button` background-color: #ededed; border: none; .. 2024. 4. 18.
CSS Modules 최종 수정 : 2024-04-18 CSS Modules 리액트 컴포넌트를 CSS로 개발하다보면 CSS 이름이 겹치는 문제가 발생할 수 있다. 이런 문제를 CSS Modules로 해결할 수 있다. 마치 자바스크립트 모듈을 사용하듯이 CSS 파일을 각각 독립적으로 사용할 수 있도록 해준다. 만약 같은 클래스 이름을 사용하더라도 CSS Moduels에서는 서로 다른 클래스 이름으로 인식한다. 장점 컴포넌트 단위로 나누어서 스타일링 할 수 있어서 CSS 클래스 이름이 충돌하지 않는다. 필요하다면 Scss로 CSS Modules를 사용할 수 있다. 단점 및 한계 참고 자료 https://github.com/css-modules/css-modules GitHub - css-modules/css-modules: Do.. 2024. 4. 18.

티스토리툴바