[TIL] 23Y01M25D
![[TIL] 23Y01M25D](/assets/img/til.png)
Facts(사실, 객관)
회사에서 React Native 프로젝트를 진햄함에 따라, 잘 모르는 내용들이 많았다. 그 중 오늘은 InputText가 숫자만 입력되게하고, 여러 버튼들 중 하나의 버튼을 라디오 형식으로 선택되게 구현하려고 하였다.
Feelings(느낌, 주관)
신입개발자로써 아직 React도 완벽하지 않은데 RN을 하려고 하니까 솔직히 좀 막막했다. 그렇지만 모든 것을 완벽하게 준비하고 시작하기에는 시간이 너무 오래걸릴꺼 같다는 생각을 했기에 일단 계속 부딪히면서 공부하자고 생각하였다. 오늘 여러개의 버튼 중 하나를 선택하면 선택한 버튼 한개만 배경 색이 변하게 하고 싶었는데 막상 잘되지 않았고 코드도 완벽하지 않았다.
Findings(배운 점)
InputText를 숫자만 입력되게 하는 것은 구글 검색을 통해 쉽게 찾을 수 있었다. 바로 Text 컴포넌트안에 keyboardType="number-pad"를 넣어주면 쉽게 해결되는 일이었다.
나는 useState를 항상 const [test, setTest] = useState<string>('')형식으로 초기 값을 하나만 지정해서 넣어주었다. 그렇지만 이번에 여러 개의 버튼 중 선택 된 하나의 버튼만 색을 다르게 구현하려고 하는 작업에서 useState의 초기 값을 배열로 넣어 사용하여 새롭게 알게 된 사실이었다. 먼저 useState의 초기 값을 버튼의 갯수 만큼 배열 형식으로 useState([true, false, false])넣어준 후 각 버튼의 인덱스를 지정해준다.
그러면 버튼을 클릭 했을때 인덱스의 번호를 onPress()안에 있는 함수 매개변수 값으로 넘겨주게 되면 해당 함수에서 클릭된 버튼의 인덱스 번호를 얻어올 수 있게 된다. 이제 함수 안에서 if문을 사용해서 useState의 값을 인덱스에 따라 수동적으로 바꾸어주었다.
Code Example
/* Modal */
const [categoryState, setCategoryState] = useState<boolean[]>([true, false, false]);
const TransactionCategory: ModalTextListType[] = [
{
index: 0,
title: 'Button1',
},
{
index: 1,
title: 'Button2',
},
{
index: 2,
title: 'Button3',
},
];
<LookUpCategoryBox>
{TransactionCategory.map((item) => (
<LookUpCategory
key={item.index}
onPress={() => {
onTransactionCategoryState(item.index);
}}
categoryState={categoryState[item.index]}
>
<LookUpCategoryText categoryState={categoryState[item.index]}>
{item.title}
</LookUpCategoryText>
</LookUpCategory>
))}
</LookUpCategoryBox>
const onTransactionCategoryState = (index: number) => {
if (index === 0) {
setCategoryState([true, false, false]);
} else if (index === 1) {
setCategoryState([false, true, false]);
} else if (index === 2) {
setCategoryState([false, false, true]);
}
};
/* styled-components */
export const LookUpCategory = styled.TouchableOpacity`
border-radius: 10px;
background-color: ${(props) =>
props.categoryState ? `${theme.color.mainColor}` : `${theme.color.input}`};
padding: 10px 38px;
`;
export const LookUpCategoryText = styled.Text`
color: ${(props) => (props.categoryState ? `${theme.color.white}` : `${theme.color.text}`)};
font-size: 14px;
font-family: ${(props) =>
props.categoryState ? `${theme.font.semiBold}` : `${theme.font.regular}`};
width: 35px;
text-align: center;
`;
Affirmation(자기 선언)
여러 개의 버튼중 선택 된 버튼에만 배경색이 변하게 구현하는 부분에서 onPress()안에 위치한 함수에서 배열인 상태값을 변경하는데 일일이 다 true인지 false인지 지정하니까 지저분해보이고 가독성이 많이 떨어진다고 생각되었다.
일단 빠르게 개발해야하는 상황에서 나온 거라 코드가 좀 별로이고 가독성이 높지 않다고 생각한다. 그래서 가독성을 높이고 좀 더 효과적인 방법이 없나 계속 찾아 볼 생각이다.
