좌충우돌 anecdote

하나의 조건을 만족할 때 여러개의 스타일 지정해주고 싶을 때가 있다.

필자는 아직 주니어라, 이런 방법이 있는 줄 몰랐다.

변경 전

    <SquareCheckBox
      type="for-success-routine"
      checked={succeeded}
      disabled={true}
      size={homeCheckBoxSize}
	  style={{
          borderWidth: pixel(2),
          borderStyle: 'dashed',
          borderColor: 조건 && theme.black_l_gray_d,
          backgroundColor: 조건 && theme.gray.l,
         }}
        />
       )}

변경 후

    <SquareCheckBox
      type="for-success-routine"
      checked={succeeded}
      disabled={true}
      size={homeCheckBoxSize}
	  style={{
	    ...(조건 && {
          borderWidth: pixel(2),
          borderStyle: 'dashed',
          borderColor: theme.black_l_gray_d,
          backgroundColor: theme.gray.l,
          }),
         }}
        />
       )}

이런식으로 

... (조건 && {style 속성})을 넣어주면 된다!

여기서 조심해야할 점은

&& 사용은 최대한 지양하는 것이 맞다. 따라서 삼항 연산자를 사용해서 undefined일 때까지 고려해주자!

* react-native-style-guide 참고

https://github.com/react-native-seoul/react-native-style-guide/blob/main/docs/ko/REACT.md