2022.04.19 (화)

React Native & Javascript - && 문법

리액트에서는 컴포넌트 부분(return 부분)에서 조건문을 사용해야 할 때 주로

 

삼항 연산자 - 조건 ? A : B

논리 연산자(AND) - A && B

논리 연산자(OR) - A || B

 

문법을 많이 사용한다.

 

평소와 같이 특정 조건일 때만 어떤 컴포넌트를 렌더링하고 싶어서 다음과 같은 코드를 작성했다.

 

<Pressable onPress={}>
	<Icon />
	<Text>테스트 중</Text>
	{count && (
    	<Text>{count}</Text>
    )}
</Pressable>

 

그런데 아무 이상이 없다가 갑자기 어느 순간

 

Text Strings must be rendered within a <Text> component

 

이 에러가 발생했다. string은 Text 컴포넌트 안에만 쓰라는 에러인데 난 도저히 Text 컴포넌트가 아닌 곳에 string을 입력한 적이 없었다.

 

예전에 실수로 닫는 꺾쇠(>) 옆에 세미콜론(;)을 붙여 에러가 발생한 적이 있었기 때문에 에러 로그에 나온 파일로 이동해서 눈을 크게 뜨고 찾아보았다.

 

그러나 역시나 이상이 없었다.

 

그러던 중 Pressable 쪽에 이상이 있다는 에러 문구를 읽고 혹시나 해서 count 부분을 수정하니 해결되었다.

 

에러가 발생한 이유는 다음과 같다.

 

count 변수는 number 타입이었는데 count 값으로 0이 아닌 다른 값이 들어갈 때는 내가 의도한 것처럼 count가 0이 아닐 때는 숫자가 잘 출력되었다.

그러나 count가 0이 되었을 때 "0" 만이 결과로 남게 되었고, 그 결과 에러 메시지가 말했 듯 Text컴포넌트가 아닌 곳에서 string을 렌더링하려는 꼴이 되어버린 것이다.

 

개발자 도구의 콘솔 창을 이용해 다음과 같은 코드를 찍어 보았다.

 

const a = 0;
const b = 1;

a && console.log('aaa');
// output: 0

b && console.log('bbb');
//output: bbb
//        undefined


const c = false;
const d = true;

c && console.log('ccc');
// output: false

d && console.log('ddd');
// output: ddd
//         undefined

 

논리 연산자 AND에서 앞에 falsy 값이 있으면 그 값만 출력하게 된다.

앞의 값이 falsy 하지 않으면 뒤의 부분만 실행된다.

 

조건문이 아닌데 조건문처럼 생각해버렸다.

 

 

react navigation - useIsFocused, useFousEffect

RN 개발 중 다음과 같은 상황이 있었다.

 

스크린 A

API로 가져온 데이터를 화면에 그리는 스크린

 

스크린 B

스크린 A에서 버튼을 클릭하면 이동하는 스크린

스크린 A에서 렌더링되는 데이터들 중 일부를 수정하는 스크린

수정을 완료하면 스크린 A로 이동한다.

 

굉장히 흔히 있는 상황이다.

 

문제는 스크린 B에서 데이터를 수정하고 스크린 A로 돌아갔을 때 스크린 A의 데이터를 새로고침해야 했다.

 

리덕스를 사용하기에는 딱 이 부분에서만 사용되는 데이터들이라 굳이 전역 상태를 사용할 필요가 있나 싶었다.

 

그러던 중 react navigation의 useIsFocused와 useFocusEffect라는 hooks을 찾게 되었다.

 

결론적으로는 스크린 A에서 useIsFocused 훅스를 사용해 스크린이 포커싱될 때 데이터를 새로 요청하도록 했다. (데이터가 매우 적음.)

 

처음에는 addListener로 focus 이벤트마다 요청을 보내는 방식을 찾았는데 react navigation 측에서는 가능하면 hooks를 사용하는 쪽이 좋다고 추천했다.

 

useFocusEffect는 사용하지는 않았지만 두 hooks 모두 유용한 것 같다.