TIL - 2021.06.24

자기전에 작성하는 TIL이다🥱

👉 오늘 한 일

• React Native 개발

👉 공부한 내용

• React Native에서 react-navigation을 사용하여 navigation.navigate로 화면을 이동할 때 parameter를 넘겨주려고 했는데 잘 안됐었다.

navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });

처럼 예시가 나와있는데 내가 실수로 'Details'를 Details(작은따옴표 없이) 작성해서 안 됐던 것 같다 ㅠㅠ 좀 더 꼼꼼히 살펴봐야겠다.

• 검색을 하는 화면을 구현하는데 @react-navigation/native의 setOptions를 사용하여 헤더를 설정했다. 이때 useLayoutEffect를 사용했는데 헤더에 있는 TextInput에 입력할 때마다 글자가 지워지는 문제가 있었는데 deps[]에 keyword를 넣어줘서 해결해다. deps[]에 넣은 값이 바뀔때마다 실행되는 것인데 다시 랜더링 되면서 나는 useState에 설정한 초기 값으로 나올 주 알았는데 아니었다. 좀 더 글들을 살펴봐야할 거 같다. 그리고 또 다른 이슈는 한글이 자음 모음이 분리돼서 입력됐다. 예를들어 공부를 입력하면 ㄱㅗㅇㅂㅜ로 입력됐다. 해결 책이 검색해도 잘 안 나와서 오픈 채팅 방에 물었는데

<TextInput
            placeholder="이름을 입력하세요."
            clearButtonMode="always"
            onChangeText={(text) => setKeyword(text)}
            // value={keyword}
            ref={inputRef}
          />

이렇게 value 부분을 빼니 해결이 됐다... 글자가 입력될 때 마다 setKeyword에 바로 등록되면서 그런거 같기도 한데 좀 더 검색을 해야 확실히 알 수 있을 것 같다...!

☕️ 잡담

처음에 생각했던 구조가 이상한 거 같아서 요새 계속 수정을 했는데 플로우는 다 수정한 거 같아서 디테일한 부분이랑 API 연결, 디자인 수정 등을 얼른해야겠다!
오늘 오랜만에 같이 단체 유럽 여행 갔다 온 형을 만났는데 이런 저런 얘기를 하니 재밌었다. 형의 직장 얘기도 듣고 유럽 얘기도 하고 다음에는 다 같이 만나면 좋겠다 ㅠㅠ
오늘,,, 예상치도 못 할 때 면접 결과가 발표났다...ㅠ 막 엄청 잘 보지는 않았어도 나름 분위기가 괜찮고 대답을 적당히 한 주 알았는데 탈락이어서 좀 멘탈이 나갔었다,,,😢 실수를 조금만 적게 했으면 됐을까 싶기도 하고 아직 졸업도 안 했으니 최대한 빨리 털어내고 다시 공부를 해야겠다...! 다음에는 좋은 결과가 있으면 좋겠다🙏

---

📑 참고사이트

• react-navigation - 리액트 네이티브 네비게이션 사이트