둔필승총

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

정말 간단하게 버튼(TouchableOpacity)누르면 모양을 변경하려고 만든 코드였다.

{fix === 'true' ? (
                <Pin
                  name="pin"
                  size={24}
                  rotation={90}
                  onPress={setFix('false')}
                  borderColor="black"
                  style={{
                    borderColor: 'black',
                    borderWidth: 1,
                    padding: 2,
                    backgroundColor: 'white',
                  }}
                />
              ) : (
                <Pinoutline
                  name="pin-outline"
                  size={24}
                  onPress={setFix('true')}
                  style={{
                    borderColor: 'black',
                    borderWidth: 1,
                    padding: 2,
                    backgroundColor: 'white',
                  }}
                />

아주 단순한 실수였는데 onPress에 함수를 바로 랜더링할때 화살표 함수로 수정해주어야 해결할 수 있다.

// onPress={setFix('false')}
onPress={() => setFix('false')}

함수가 호출될 때 this는 호출부에 다라 결정되므로, 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져서 binding을 해준다. 

그러나 이 작업이 불편하므로 transform-class-properties라는 바벨의 문법을 이용해서 화살표 함수 형태로 메서드를 정의하는 것이다. 

처음 코드는 렌더링될때 함수가 실행되는데 state를 변화하는 함수라서 계속 렌더링되어서 발생하는 문제이다.