[241104 TIL] 본캠프 24일차

📌 오늘의 TIL [React 숙련] 강의 챌린지반 수업

 

 

 [React 숙련] 강의 

styled-components

React에서 CSS-in-JS 방식으로 컴포넌트를 스타일링할 수 있게 도와주는 패키지이다.

 

• 기본적인 사용법

import styled from 'styled-components';

const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 20px;
`;

function App() {
	return <StBox>박스</StBox>;
};

export default App;

 

• 조건부 스타일링 적용

import styled from 'styled-components';

const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid ${(props) => props.borderColor};
    margin: 20px;
`;

function App() {
    return (
        <div>
            <StBox borderColor="red">빨간 박스</StBox>
            <StBox borderColor="green">초록 박스</StBox>
            <StBox borderColor="blue">파란 박스</StBox>
        </div>
    );
};

export default App;

 

• switch문과 map을 이용해서 코드 리팩토링

import styled from 'styled-components';

const StContainer = styled.div`
	display: flex;
`;

const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid ${(props) => props.borderColor};
    margin: 20px;
`;

const boxList = ['red', 'green', 'blue'];

const getBoxName = (color) => {
    switch (color) {
        case 'red':
        	return '빨간 박스';
        case 'green':
        	return '초록 박스';
        case 'blue':
        	return '파란 박스';
        default:
        	return '검정 박스';
    }
};

function App() {
    return (
        <StContainer>
        {boxList.map((box) => (
        	<StBox borderColor={box}>{getBoxName(box)}</StBox>
        ))}
        </StContainer>
    );
};

export default App;

 

useState

컴포넌트에서 가변적인 상태를 가지게 해준다.

 

기본적인 방법을 이용할 경우, 배치 방식으로 처리를 하기 때문에 setState()를 여러 번 호출해도 해당 명령들을 하나로 모아서 최종적으로 한 번만 실행을 시킨다.

 

함수형 업데이트를 이용할 경우, setState()를 호출한 횟수만큼 순차적으로 실행을 시킨다.

 

• 기본적인 사용법

const [state, setState] = useState(initialState);

setState(state + 1);

 

• 함수형 업데이트

const [state, setState] = useState(initialState);

setState((prev) => { return prev + 1 });

 

useEffect

컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있다.

 

• 리렌더링이 발생할 때마다 실행

import { useEffect } from 'react';

function App() {
    useEffect(() => {
    	console.log('Hello useEffect!');
    });

    return <div>Home</div>;
}

export default App;

 

• 최초 렌더링 시 한 번만 실행

import { useEffect } from 'react';

function App() {
    useEffect(() => {
    	console.log('Hello useEffect!');
    }, []);

    return <div>Home</div>;
}

export default App;

 

• 특정 state 값이 변경될 때만 실행

import { useEffect } from 'react';

function App() {
	const [value, setValue] = useState('');
    
    useEffect(() => {
    	console.log('Hello useEffect!');
    }, [value]);

    return <div>Home</div>;
}

export default App;

 

• 컴포넌트가 사라질 때 실행

import { useEffect } from 'react';

function App() {
    useEffect(() => {
    	console.log('Goodbye useEffect!');
        
    	return () => {
    		console.log('Goodbye useEffect!');
        }
    }, []);

    return <div>Home</div>;
}

export default App;

 

useRef

useState와 비슷하게 값을 저장하는 용도로 사용되지만 값이 변경되어도 리렌더링이 발생하지 않는다.

 

특정 input을 focusing 하는 등 DOM 요소를 다루는 용도로 사용된다.

 

• 값 저장

import { useRef } from 'react';

function App() {
    const ref = useRef('초기값');
    
    console.log(ref);  // { current: '초기값' }

    return (
        <div>Home</div>
    );
}

export default App;

 

• DOM 요소 조작

import { useEffect, useRef } from 'react';

function App() {
    const idRef = useRef('');

    useEffect(() => {
    	idRef.current.focus();
    }, []);

    return (
        <>
            <div>
            	아이디 : <input type="text" ref={idRef} />
            </div>
            <div>
            	비밀번호 : <input type="password" />
            </div>
        </>
    );
}

export default App;

 

useContext

state를 전역적으로 관리해 줌으로써 prop drilling 현상을 방지할 수 있다.

/* context/FamilyContext.jsx */

import { createContext } from 'react';

export const FamilyContext = createContext(null);

/* components/GrandFather.jsx */

import Father from './Father';
import { FamilyContext } from '../context/FamilyContext';

function GrandFather() {
    const houseName = '스파르타';
    const pocketMoney = 10000;

    return (
        <FamilyContext.Provider value={{ houseName, pocketMoney }}>
        	<Father />
        </FamilyContext.Provider>
    );
}

export default GrandFather;

/* components/Father.jsx */

import Child from './Child';

function Father() {
	return <Child />;
}

export default Father;

/* components/Child.jsx */

import { useContext } from 'react';
import { FamilyContext } from '../context/FamilyContext';

function Child({ houseName, pocketMoney }) {
    const data = useContext(FamilyContext);

    return (
        <div>
            나는 이 집안의 막내에요.
            <br />
            할아버지가 우리 집 이름은 {data.houseName}라고 하셨어요.
            <br />
            게다가 용돈도 {data.pocketMoney}원만큼이나 주셨답니다.
        </div>
    );
}

export default Child;

 

 

 챌린지반 수업 

컴포넌트 분리

하나의 거대한 컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 의미한다.

• 컴포넌트 분리의 장점
  • 재사용성 증가
  • 가독성 향상
  • 유지보수 용이
  • 성능 최적화
  • 테스트 용이
• 컴포넌트 분리 기준
  • 단일 책임 원칙
  • 재사용 가능성
  • 크기 및 복잡도

 

공용 컴포넌트

여러 곳에서 재사용할 수 있는 범용적인 컴포넌트를 의미한다.

일반적으로 Button, Input, Modal 등과 같은 UI 요소들이 공용 컴포넌트로 사용된다.

• 공용 컴포넌트를 만들 때 주의할 점
  • 특정 컴포넌트에서만 사용할 수 있게 생성하지 말 것
  • children을 단순히 HTML 태그로 감싸는 용도로 사용하지 말 것
  • 적절한 default 값을 지정해 줄 것

 

Util 함수

애플리케이션 전반에서 자주 쓰이는 공통 기능을 수행하는 함수를 의미한다.

일반적으로 문자열 포맷팅, 데이터 정렬, 날짜 변환 등과 같은 기능들이 포함된다.

• Util 함수를 작성할 때 주의할 점
  • 특정 컴포넌트에서만 사용할 수 있게 생성하지 말 것
  • 특정 상황에서만 유효하게 생성하지 말 것
  • 순수 함수로 작성할 것
  • 에러 핸들링 처리를 할 것
  • 함수의 이름을 기능과 연관되게 작성할 것

 

디자인 패턴

• Presentational & Container 패턴
  • UI와 비즈니스 로직을 분리
  • Presentational 컴포넌트는 주로 화면에 보여지는 UI를 담당
  • Container 컴포넌트는 상태 관리 및 비즈니스 로직을 담당
• Compound Component 패턴
  • 하나의 부모 컴포넌트가 여러 하위 컴포넌트를 포함함으로써 상호작용하는 컴포넌트들을 하나의 단위로 구성
  • 부모 컴포넌트를 통해 자식 컴포넌트의 상태나 동작을 제어할 수 있기 때문에 복잡한 UI를 유연하게 구성 가능
• 아토믹 디자인 패턴
  • 컴포넌트를 여러 단위로 분류해서 시스템화
  • Atoms : 더 이상 분해할 수 없는 기본 컴포넌트
  • Molecules : 원자들을 조합하여 만든 작은 컴포넌트
  • Organisms : 원자와 분자를 조합하여 만든 복잡한 컴포넌트
  • Templates : 페이지의 레이아웃을 정의하는 구조
  • Pages : 실제 컨텐츠가 채워진 완성된 페이지