전체 글

TIL] 스타일 컴포넌트

스타일 컴포넌트 스타일 컴포넌트는 컴포넌트 스타일링 기법 중 하나입니다. 스타일 컴포는 터는 CSS-in-JS 라이브러리 중 하나이며 컴포넌트에 스타일을 직접 입히는 방식이라고 생각하시면 됩니다! 스타일 컴포넌트의 장점 스타일 컴포넌트를 사용하면 클래스 이름을 짓지 않아도 괜찮습니다. 또한 컴포넌트에 스타일을 적기 때문에 간단하면서 직관적입니다. 스타일 컴포넌트 패키지 설치하기 yarn add styled-components 위의 코드를 입력하시면 패키지가 설치됩니다. 패키지를 설치하시고 임포트를 해주시면 됩니다. import styled from 'styled-components'; 스타일 컴포넌트 사용하기 const Example = styled.div` display: flex; flex-direc..

TIL] Switch

라우터 스위치는 라우터의 내장된 컴포넌트 종류 중 하나입니다! 스위치를 알기 전에 라우터를 먼저 알아보았습니다! 라우터는 path속성으로 자신이 원하는 URL 주소를 만들고 해당 URL에 들어갈 컴포넌트를 지정할 수 있기 때문에 브라우저 이동 없이 컴포넌트만 바꿔서 새 로고 침 없이 페이지 전환이 가능합니다. 싱글 페이지 애플리케이션은 새로고침을 하지 않고 컴포넌트만 바꾸기 때문에 싱글 페이지 애플리케이션이 어떻게 새로운 페이지를 그려주는지 알게 되었습니다! 바로 라우터를 통해 그려줍니다! Switch 스위치는 라우터로 생성된 자식 컴포넌트 중 매칭 되는 첫 번째 라우터를 렌더링 해줍니다. 통상적으로 메인 라우트의 경로를 "/"로 지정하고 다른 라우터에는 "/nerd" 이런 식으로 지정하는 경우가 많은데..

TIL] 리액트

SPA SPA란 Single Page Application을 뜻합니다! 말 그대로 서버에서 주는 html이 1개뿐인 애플리케이션입니다. 보통 웹사이트는 페이지를 이동할 때마다 서버에서 정적 자원을 내려준다면 SPA는 딱 한번 정적자원을 받아옵니다. 기존 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러와 비효율적이었습니다. SPA는 위의 전통적인 웹사이트의 단점을 보완했습니다! SPA의 단점은 어떤 것이 있을까요? SPA의 단점은 딱 한 번 정적 자원을 내려받아 처음에 모든 컴포넌트를 받아옵니다. 따라서, 컴포넌트가 많다면 첫 로딩 속도가 느리다는 단점이 있습니다. 라우팅 html은 딱하나를 가지고 있지만 SPA도..