2023.03.09) 항해 32일차

리액트 패턴중에 하나인 컴파운드 패턴을 연습했다.

 

최대한 컴파운드를 기능단위로 쪼개서 칠드런으로 컴파운드를 계속 뱉어 들어간다.

이렇게하면 코드 재사용이 매우 편해진다는 장점이 있다.

애지간하면 props를 자제하는게 좋은데 분기가 단순한 경우에는 props 한둘 정도는 넣어도 괜찮다.

컴파운드컴포넌트 패턴을 사용하면 복잡한 컴포넌트를 유연하게 사용할수 있다는 장점이 있다.

해당 패턴이 들어가는 컴파운드 부분에서 전체적인 구조를 한눈에 알아 볼 수 있고,

스타일 지정하고 디자인을 변경하는게 아주 용이하다.

협업시 다른 개발자가 볼 경우 한번에 뭐가 뭔지 알아볼 수 있게 하는 게 중요하니깐 네이밍이 중요하니 연습이라도 해보았다.

 

밑은 예시코드이다!

return (
<Wrap>
	<StForm onSubmit={submit}>
		<StRowFlexDiv style={{ justifyContent: 'space-between' }}>
			<StRowFlexDiv style={{ gap: '5px' }}>
				<input ref={titleRef} placeholder='Title' />
				<input ref={memoRef} placeholder='Memo' />
			</StRowFlexDiv>
			<button type='submit'>Submit</button>
		</StRowFlexDiv>
	</StForm>
</Wrap>

uuid를 이용한 고유한 값 생성 uuid는 소프트웨어 구축에 쓰이는 식별자 표준이다.

uuidsms 32개의 16진수로 표현되며 총 36개의 문자로 된 8-4-4-4-12라는 5개의 그룹을 하이픈으로 구분한다.

550e8400-e29b-41d4-a716-446655440000

이런식~~~ 으로~~ 표현된다.

2.71 * 10^18 개의 UUID를 생성했을 때 최소 1개가 중복(충돌) 될 확률이 약 50%라고 한다.

따라서 uuid가 중복될 걱정은 안하고 고유값으로 사용해도 될 거 같다.

그리고 실제로도 현업에서도 많이 사용한다.

명령어 - npm install uuid (uuid 생성 패키지를 받는다!)

import {v4 as uuidv4} from 'uuid'; uuidv4(); 함수를 실행하면 사용한다!!