조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 개발 진행
CSS가 구조적으로 작성될 수 있게 도움주는 도구
CSS 전처리기 중 가장 유명한, CSS를 확장해 주는 스크립팅 언어
SCSS 코드를 읽어서 전처리한 다음 컴파일 해서 전역 CSS 번들 파일을 만들어 주는 전처리기 역할을 함 => 문제 발생(컴파일 된 CSS 용량이 너무 커져버림)
CSS 문제를 보완하기 위해 대두됨
3가지 모두 같은 지향점을 가짐
Styled-Component가 대표적
: 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴 제공
<출처: 코드스테이츠>
//with npm
npm install --save styled-components
{
"resolutions": {
"styled-components": "^5"
}
}
import styled from "styled-components"
UI개발 즉, Component Driven Development를 하기 위한 도구
각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있음
React 사용 시 DOM을 직접 건드려야하는 상황이 발생 시 사용할 수 있는 것
const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
<div>
<input ref={주소값을_담는_그릇} type="text" />
{/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
{/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
{/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
</div>);
이 주소값은 re-render 되더라도 바뀌지 않음
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>);
}