TIL - Styled Components, useRef

Styled Components

Styled Components를 한마디로 정의하자면 리액트를 이용해 CSS도 자바스크립트 코드에서 다룰 수 있는 것 이다.

Styled Components 사용 방법

1. 먼저 터미널에서 설치한다

npm install --save styled-components

2. 사용할 파일에 import 한다.

import styled from "styled-components"

3. 변수를 지정하고 styled.만들기능 으로 변수를 만든다. 그리고 백틱으로 감싸 css에서 쓰던 문법을 사용한다.

const BlueButton = styled.button`
...
`

4. 버튼을 만들듯이 함수명을 가진 버튼을 만든다.

<BlueButton>Blue Button</BlueButton>;

Styled Components 예시

Styled Components 적용 전 코드

Styled Components 적용 후 코드 (호버 기능을 추가하였다.)

useRef

useRef를 이용해 focus등의 기능을 사용할 수 있다.

리액트는 상태가 변화할때 리렌더링을 한다. 그런데 동영상을 정지하거나 버튼을 클릭할 때 마다 리렌더링이 된다면 현재의 상태를 저장하지 못한다. 그렇기 때문에 useRef를 사용해 리렌더링을 시키지 않아 상태를 변화하게 한다.

useRef 사용 방법

const 변수= useRef(참조자료형)
<input ref={변수} type="text" />
  
const onButtonClick = () => {
  변수.current.focus();
};

<button onClick={onButtonClick}>Focus the input</button>