리액트에서 칠드런으로 받은 데이터에게 현재 위치의 값을 전달하기

react 코드를 작성하던중 하나의 컴포넌트에서 자주 사용되는 로직을 분리하게 되었다.

 

이때 부모에서 부터 이벤트를 받아서 자식에서 사용하고 있었기 떄문에, 부모의 위치에 있는 값을 가져올 필요가 존재했다.

자바스크립트의 특성상(렉시컬 스코프) 선언된 위치의 값을 가져오는것은 매우 쉽게 할 수 있었으나 이를 불러오는곳에서

첨부하고자 하였을때 어떻게 해야할까 고민하게 되었다.

 

이때 children을 React에서 제공하는 Children객체의 map 을 통해 새로운 자식을 만들며, 필요한 변수값을 다시 넘겨주는 방식을 

떠올리게 되었다.

위의 코드를 작성해보면

export function Test({children}) {
	return {Children.map(children, (child) =>
            cloneElement(child, {
              onClick: () => {
                child.props.onClick(contry);
              },
            })
          )}
}

 

부모에서 받아오는 특정 onClick이벤트에, 특정 값을 포함하여 보내는 방식으로 처리할 수 있었다.

 

다른 방식은 없을지 고민하고 있으나. 아직 별다른 방식을 찾지못하였다.