[TIL] 03.13 react children,Children / redux props.dispatch

Circle 버튼의 TS 전환을 이어서 진행 하였다. 두가지 아이콘을 CircleButton에서 받기 때문에 분기 처리를 해주어야 했다. 

 

className을 내려주는 문제를 해결해야 되는 상황이였다. 

<Parents>
	<CircleButton className= son>
    	    <Image className= grandson />
	</ CircleButton>
</Parents>

이런 식으로 되어 있는 구조에서 Image 컴포넌트를 CircleButton 컴포넌트로 포함시켜서 다른 Image 컴포넌트와 분기를 시켜줘야 하는 작업 이였다. 그중 className을 props로 받는 Image 컴포넌트에 대한 문제가 있었다. 

 

Image 컴포넌트를 합치기 전에는 ...rest 를 통하여 className을 BaseButton 컴포넌트로 내려주어서 처리 했지만 그렇게 내려버리면 Image 컴포넌트에는 className을 내려줄 수가 없었다. 내려 주더라도 Image 컴포넌트의 className을 또 가려내야 했다. 

 

그래서 Image props를 만들어서 해당 props를 Image 컴포넌트로 내려 주는 방식으로 처리하였다. 

<Parents>
	<CircleButton className= son Image=grandson />
</Parents>

 

하지만 완성하고 나니 코드가 지저분해 보였고 children으로 처리를 해주는게 더 나아 보였다. 내려 줄때 잘 선택해서 내려주어야 하지만 훨씬 깔끔하게 처리할 수 있었다. 

//Parents 컴포넌트 Image 내릴 때(className 내려줘야함)
<Parents>
	<CircleButton className= son>
    	    <Image className= grandson />
	</ CircleButton>
</Parents>


//Parents 컴포넌트 NotImage 내릴 때(className 안내려주는 Image 컴포넌트)
<Parents>
	<CircleButton className= son>
    	    <NotImage/>
	</ CircleButton>
</Parents>


// CircleButton 컴포넌트 
<CircleButton {...rest}>
	{children}
</CircleButton>

오늘 자잘한 에러가 발생하였는데 경로가 잘못 설정 되었던 경우가 있었다. 항상 경로를 잘 살펴 보아야 겠다. 그리고 사스 파일을 적용할때 ClassName을 확인하면 어디가 잘못 되었는지 보다 쉽게 찾을 수 있었다 항상 ClassName을 잘 살펴 보아야 겠다. 

 

Childern

React.Children는 불투명(Opaque) 자료 구조인 this.props.children를 다루는 유틸리티 함수들을 제공한다고 한다. 

childern들을 다룰 수 있는 함수인 것 같은데 공부할 필요가 있을것 같다. 

react 공식문서: https://ko.reactjs.org/docs/react-api.html#reactchildren

 

Redux

props.dispatch 부분을 type 처리를 해주어야 하는데 dispatch 함수에 대해 잘 몰라서 적용을 하지 못하였다. 

redux를 사용하는 부분도 이제 TS로 바꿔 주어야 하기 때문에 Redux에 대해서 공부를 해야한다.