본문 바로가기

내배캠 4기 React - TIL

(64)
220105 TIL 리액트 네이티브에서 input창은 TextInput이라는 태그를 쓰고 onSubmit 속성을 onSubmitEditing 으로 쓰면 된다. 버튼도 button 태그가 아니라 TouchableOpacity로 쓴다. 웹이랑 비슷한 듯 하면서도 다른게 많아서 새로 익히려면 또 오랜 시간이 걸릴 듯 싶다..
220104 TIL useEffect / useFocusEffect 차이 useEffect는 컴포넌트가 마운트(렌더링)됐을 때와 언마운트 됐을 때 실행 useFocusEffect는 컴포넌트가 화면에 지금 보이는지(Focus), 안보이는지(Blur)를 감지하여 실행
230103 TIL 네이티브 강의를 계속 듣다 보니 의문이 생기는 게 왜 안드로이드는 지원되는 게 많이 없을까.. 분명 강의 보면서 따라치는데 안 먹혀서 문서를 찾아보니 웬만한 건 전부 iOS만 지원이네ㅜㅜㅜㅜ 이러면 프로젝트 어떻게 해야하지...폰을 바꿀 수도 없고 ㅋㅋㅋㅋㅋㅋㅋㅋ 그리고 비동기 공부를 진짜 확실히 많이 해야 할 거 같다고 느꼈다..
230102 TIL export만 하고 import 할 때 중괄호로 감싸서 import 해야함. React Native expo 프로젝트 만드는 명령어 1. npx create-expo-app 프로젝트명 2. eas update:configure -> 로그인 안되어있으면 이메일 적고, 되어있으면 y 누르기 3. 완료 후 eas update로 배포 4. 링크 뜨면 링크 열어서 QR코드 확인
221230 TIL 리액트 네이티브를 시작했는데 폰 화면에 바로 나타나는 게 너무 신기했다. 근데 css 하는 거 금방 할 줄 알았는데 뭔가 다른 느낌...안돼... 오늘은 개인사정으로 공부를 거의 못했다. 마음이 많이 불안정한 상태라 이번주는 좀 쉬고 새해부터 진짜 진짜 열심히 해야지
221229 TIL React.js + React-dom => Web App React.js + React Native(Bridge/JSI, etc) => Native Mobile Apps (iOS / Android) React Native 우리가 쓰던 div 태그가 native에선 View 컴포넌트로 쓰고 native에서 쓰는 UI 컴포넌트는 import를 해와야한다. View는기본적으로 display = flex 속성을 가진다. 그리고 기본 방향이 세로방향(위->아래)이다. 문자열을 쓸 때는 Text 컴포넌트로 감싸주어야 한다. (=p 태그) 로컬에 있는 이미지를 불러올 때 Image 컴포넌트를 쓰고 src 대신 require라는 함수를 써야 이미지를 불러올 수 있다. 웹 이미지를 불러올 때는 source={{uri: ..
221228 TIL 프로젝트가 끝났다! 팀원 4명에서 하려다 보니 추가 기능도 안 넣고 필수 기능으로 css도 단순하게 잡고 시작했는데 결국에는 기능을 다 완성하지 못했다.. 욕심 부리지 않고 필수만 하기로 해서 처음에는 진짜 다 할 수 있을 줄 알았는데 하다 보니 진짜 이게 맞나 싶었다.. 리덕스로 실컷 코드 짜고 있다가 json-server를 이용해야해서 급하게 axios 공부하면서 코드를 바꿔갔다. 처음부터 길을 정했어야 했는데 ㅜㅜ 이번에도 모달을 맡아서 했는데 리액트로 모달을 하려다보니 조금 어려웠지만 구글신을 이용해 모달은 잘 만들었다 . 그런데.. 우리가 수정과 삭제 아이콘을 누르면 비밀번호가 뜨는 모달이 뜨고 비밀번호가 작성했을 때의 비밀번호와 일치해야지만 수정, 삭제가 이루어지는 로직을 짜야됐었는데 댓글 리..
221227 TIL 팀원분이 filter 함수를 쓰려고 했는데 적용이 되지 않아서 찾아보시고 옵셔널 체이닝을 쓰니 적용이 됐다고 했다. 저 물음표가 뭐길래 되는건지 궁금해서 찾아보았다. ?. 은 ?. '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 연산자는 아니고 함수나 대괄호와 함께 동작하는 특별한 문법 구조체라고 한다. ?. 를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에게 안전하게 접근할 수 있다. 그러나 남용은 금물! 왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 함!! 옵셔널 체이닝 문법 ?. 세 가지 형태 1. obj?.pro : obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함 2. obj?.[prop] : o..