TouchableOpacity의 onPress 부분을 보면 () => onToggle(id)와 같은 형태로 Props 설정 부분에서 바로 함수를 선언해 넣어줬습니다. 함수를 만들어 특정 상수 또는 변수에 담지 않고 바로 사용하는 함수를 익명 함수라고 부릅니다. 만약 함수가 간결하고, 사용하는 곳이 한 곳밖에 없다면 앞의 코드처럼 익명 함수를 작성하면 됩니다.

여기서 주의할 점은 절대로 onPress={onToggle(id)}와 같이 코드를 작성하면 안 된다는 점입니다. 이렇게 코드를 작성하면 컴포넌트가 렌더링될 때마다 onToggle이 호출되는 상황이 발생합니다. onToggle이 호출되면 컴포넌트는 또 리렌더링되고, 결국 앱에서 오류가 발생하게 됩니다.

코드를 다 작성했으면 항목의 좌측 원을 터치해 토글이 잘 작동하는지 확인해보세요.

▲ 그림 4-8 항목 토글하기