[프론트엔드 / React Native] 생략, 보여주기 기능을 하는 여러 버튼들을 어떻게효과적으로 구현 할 수 있나요?

진행 중인 프로젝트에서 펼쳐보기 버튼을 누르면 상세보기가 되고 생략 버튼을 누르면 생략이 되는 버튼을 컴포넌트가 추가될 때 자동으로 생성되는 것을 목표로 구현해보았습니다. 

 

 처음 시도에서는 컴포넌트를 보여주는 것을 관리하는 state를 각각 만들어서 독립적으로 관리하려고 했습니다. 하지만 그렇게 되면, 추가 버튼을 눌러서 컴포넌트를 새로 만들면 새롭게 변수를 만들어야 하는데, 변수를 자동 생성하는 게 쉽지 않았고 변수가 많아짐에 따라 코드의 가독성이 저하되고 유지 보수하는데 어려움이 있는 문제가 발생하였습니다. 

 

 이후, 컴포넌트를 보여주는 Boolean 값들을 가지는 배열을 state로 만들었습니다. 그렇게 함으로써 새롭게 컴포넌트를 만들 때, 배열에 값을 push를 해서 관리하기 용이하도록 하였습니다. 

 

 

이미지 출처: https://ko.reactjs.org/docs/hooks-state.html

<구현 코드>

<View style={styles.destinationDeleteBtn}>

<Pressable onPress={() => setIsDelete([!isDelete[0], isDelete[1]])}>

<Text style={styles.DeleteBtnText}>삭제</Text>

</Pressable>

</View>

<Pressable onPress={() => {setIsdisplay([!isDisplay[0], isDisplay[1]]);}}>

<Image style={styles.bottomArrowWhite} source={isDisplay[0] ? bottomArrowWhite : topArrowWhite} />

</Pressable>

 또한, 각 컴포넌트에 해당하는 값을 저장하기 위해 배열에 object 형식으로 값을 저장하면 나중에 값이 추가될 때 map(item, index)를 이용하면 각 컴포넌트에 맞는 값을 불러올 수 있다는 것을 알게 되었습니다. 

 

출처: https://velog.io/@claire-euni/js-map%ED%95%A8%EC%88%98%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

 

 

이번에 공부하면서 느낀 점은 같은 기능을 하는 변수들이 필요할 때, 배열의 각 요소를 변수로 이용하고 그 값에 object를 넣을 것. 그리고 React Native를 잘 이용하기 위해 useState를 이용하여 state가 바뀔 때마다 렌더링이 될 수 있도록 변수의 값이 달라질 때 적용해보도록 하겠습니다. 

 

 

 

 

 

블로그 구독자 문의 주소 : info@weirdsector.co.kr

그로스 해킹 파트너, LABBIT 바로가기

LABBIT을 운영하는 Team 위어드섹터 만나러 가기