오늘의 학습내용

1. CDD (Component Driven Development)

• 부품단위로 UI 컴포넌트를 만들 수 있음
• 컴포넌트 재사용이 가능함
• 상향식 개발에 적합함

1) Styled Components

1-1) 설치 방법

• terminal

npm install --save styled-components

• package.json

// 아래 코드 추가
{
  "resolutions": {
    "styled-components": "^5"
  }
}

• import

import styled from "styled-components"

1-2) 사용법

// 스타일 선언
const 컴포넌트명 = styled.태그명`

CSS 속성명 : 속성값;

`;

// 컴포넌트 재사용을 통한 확장
const 확장컴포넌트명 = styled(재사용컴포넌트명)`

추가할 CSS 속성명 : 속성값;

`;

// props 활용(삼항연산자로 조건, 값에 따른 스타일 적용 가능)

const 컴포넌트명 = styled.태그명`

CSS 속성명 : ${(props) => 함수코드}

`

// 전역스타일 설정 및 적용

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
    margin : 2px;
    border-radius : 5px;
	}
`

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일</Button>
		</>
	);
}

2. useRef

1) 사용 목적

• React에서 state가 변경될 때, 렌더링이 일어나게 됨.
• 이때 컴포넌트들의 내부 변수들은 초기화 되는데, useRef를 이용하면, 값에 변화가 있어도 다시 렌더링이 일어나지 않으며 state의 변화가 있어 렌더링이 되더라도 useRef의 값은 유지가 된다는 특징이 있음.
• 따라서 화면 리렌더링 시 값이 바뀌면 안되는 부분 / 값이 변해도 화면이 리렌더링되면 안되는 부분에서 useRef가 필요함.
• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 주로 사용함.

2) 사용법

// useRef 선언
function CustomTextInput() {
  
  const inputEl = useRef(null);
  
  const onButtonClick = () => {
    // render 메서드 안에서 ref가 엘리먼트에게 전달되었을 때, 그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 됩니다. (출처 : react 공식문서)
    inputEl.current.focus();
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}