둔필승총

npm 설치를 하는데 이런 오류가 나왔었다. 

github 작업할 때 @react-native-firebase/auth는 node-module에 있었는데 @react-native-firebase/storage를 설치해서 사용하려고 하니까 설치가 안되는 오류였다. 

오류메시지는 Conflicting peer dependecy 와 Could not resolve dependency 였는데 @react-native-firebase안에 이미 auth가 있고 storage가 뭔가 이미 설치된거랑 안맞아서 오류가 생기는 느낌..?(영어 그대로 해석해봤을때..)

https://iancoding.tistory.com/154

다음을 참고해서 해결하였다.

npm install @react-native-firebase/firestore --legacy-peer-deps 

뒤에 --legacy-peer-deps를 사용하여 해결하였다.

https://velog.io/@yonyas/Fix-the-upstream-dependency-conflict-installing-NPM-packages-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EA%B8%B0

다음을 참고하니까 npm이 버젼이 새로워지면서 원래는 peer dependecies가 있으면 경고만 뜨고 설치는 되었는데 npm7버전은 설치가 막힌다고 한다. 

그래서 --force를 사용하던지 --legacy-peer-deps를 사용하면 충돌을 무시한다고 한다.

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를 변화하는 함수라서 계속 렌더링되어서 발생하는 문제이다.