Today I Learned 2023.03.09. [React 프로젝트 4]

Compound Component Pattern

리액트 디자인 패턴 5가지 중 하나이다
컴파운드 컴포넌트 패턴을 사용하면 복잡한 컴포넌트를 유연하게 사용할 수 있는 장점이 많다.

<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>

일단은 Props로 계속 주던 불편함을 버리고,
여러 하위 컴포넌트를 사용해서 컴포넌트를 만들 수 있다.

그리고 내부 동작 및 구현을 숨길 수 있는 장점이 있고,
해당 패턴이 들어가는 컴파운드 부분에서 전체적인 구조를 한눈에 알아볼 수 있다.

Main과 Sub 컴포넌트로 가지고 있어서 컴포넌트에서 관리할 수 있게 하는 것이 더 직관적이다라고 한다.

path 설정에 대한 고질적인 문제

const navigate = useNavigate();

onClick={() => {navigate("/")}}...(1)


<StLink to={`/${todo.id}`} key={+todo.id}>
      <div>상세보기</div>
</StLink>

<BrowserRouter>
	<Routes>
        <Route path="/" element={<Home />} />
        <Route path="/:id" element={<Detail />} />
	</Routes>
</BrowserRouter>

path 설정을 이상하게하면, 이상한 페이지로 넘어가는 경우가 많았다.그런 것들을 좀 고쳐보자.