[TIL] 내일배움캠프 React 과정 2023.01.07

Today I Learned

• React Native 댓글 CRUD 구현하기

 

---

버튼 클릭할 때마다 토글하기

const [toggle, setToggle] = useState(false);

<ToggleBtn onPress={() => setToggle(!toggle)}>

{toggle &&
  <ToggleBox>
   ...생략...
  </ToggleBox>
}

우측에 ...을 클릭할 때마다 수정, 삭제 버튼을 토글하고 싶었다. 여러 번의 시행착오 끝에 useState에 boolean 속성을 넣어서 구현했다. &&연산자를 이용해서 toggle이 true일 때만 ToggleBox가 뜨도록 구현했다. 그리고 toggle 속성은 ToggleBtn을 클릭할 때마다 true와 false를 왔다갔다 한다.

 

참고 https://webisfree.com/2019-08-14/react-native-컴포넌트-숨기기-hide

 

 

TextInput에 defaultValue 설정 시 주의할 점

<TextInput defaultValue={comment.content} />

TextInput 컴포넌트의 defaultValue 속성을 이용해서 수정할 때 원래 있던 데이터를 input에 불러오고 싶었는데 자꾸 아무런 데이터도 불러오지 못했다. 결국 이유를 찾아냈는데 TextInput에 value와 defaultValue 두 속성을 동시에 이용했기 때문에 충동이 나서 dafaultValue가 작동하지 못했던 거 같다. value를 지우고 defaultValue만 넣었더니 기존 데이터를 정상적으로 불러올 수 있었다.

 

 

MBTI 타입에 따라 color 다르게 설정하기

<MbtiBtn mbtiColor={comment.mbti ==="ISTP" || "ISFP" || "ESTP" || "ESFP"? "#f0b83f":comment.mbti === "ISTJ" || "ISFJ" || "ESTJ" || "ESFJ"?  "#4298B4" :comment.mbti === "INFJ" || "INFP" || "ENFJ" || "ENFP"?"#33A474":"#88619A" }>

삼항연산자를 이용해봤지만 실패했다.

 

let mbtiColor = "";
if (mbti === "ISTP" || "ISFP" || "ESTP" || "ESFP") { mbtiColor = "#f0b83f" }
if (mbti === "ISTJ" || "ISFJ" || "ESTJ" || "ESFJ") { mbtiColor = "#4298B4" }
if (mbti === "INFJ" || "INFP" || "ENFJ" || "ENFP") { mbtiColor = "#33A474" }
if (mbti === "INTJ" || "INTP" || "ENTJ" || "ENTP") { mbtiColor = "#88619A" }

if문으로 mbtiColor를 스타일 컴포넌트에 props로 넘겨주려 했는데 자꾸 mbtiColor가 맨 밑에 있는 "#88619A"만 뜬다. 

 

if (mbti === "ISFP") {
    console.log(mbti, "O")
} else {
    console.log(mbti, "X")
}

어디가 문제일까 처음부터 접근해보기로 했다. 그리고 문제 지점을 발견했다. if문에 조건을 "ISFP"하나만 설정했을 때는 조건에 따라 결과가 O, X로 잘 출력된다.

 

if (mbti === "ISFP" || "ISFJ") {
    console.log(mbti, "O")
} else {
    console.log(mbti, "X")
}

근데 OR 연산자를 추가하면 조건과 상관 없이 전부 "O"가 출력되어 버린다. 혹시 내가 OR 연산자를 잘못 사용하고 있는 걸까?

 

 if (mbti === "ISFP" || mbti === "ISFJ")

문제를 해결했다!! if문 조건에 OR 연산자를 잘못 사용하고 있던 거였다. mbti ===을 각 경우마다 넣어줘야 했다.

 

let mbtiColor = "";
if (mbti === "ISTP" || mbti === "ISFP" || mbti === "ESTP" || mbti === "ESFP") { mbtiColor = "#f0b83f" }
if (mbti === "ISTJ" || mbti === "ISFJ" || mbti === "ESTJ" || mbti === "ESFJ") { mbtiColor = "#4298B4" }
if (mbti === "INFJ" || mbti === "INFP" || mbti === "ENFJ" || mbti === "ENFP") { mbtiColor = "#33A474" }
if (mbti === "INTJ" || mbti === "INTP" || mbti === "ENTJ" || mbti === "ENTP") { mbtiColor = "#88619A" }

그래서 최종적으로 구현한 것을 정리하자면 if문으로 mbti마다 mbtiColor를 설정한다.

 

<MbtiBtn mbtiColor={mbtiColor}>
    <Mbti>{mbti}</Mbti>
</MbtiBtn>

const MbtiBtn = styled.View`
  background-color: ${(props) => props.mbtiColor};
`

그리고 스타일 컴포넌트로 props를 넘겨줘서 background-color를 변경한다!

 

그럼 이렇게 mbti 타입마다 버튼 색상이 달라지게 구현할 수 있다.

 

---

회고

원래는 오늘 하루 쿼리를 공부한 다음에 본격적으로 프로젝트 기능 개발을 시작하려고 했는데 어제 저녁에 useQuery로 data 불러오는 것부터 실패한 이후로 의욕을 잃고 일단 일요일까지 UI 다 완성하고 그냥 firebase로만 CRUD 구현하는 것을 목표로 정했다.

 

일단 오늘 파이어베이스 이용해서 댓글 CRUD 구현하는 건 성공했다. 근데 params를 받아서 특정 게시물의 댓글만 보여준다든지, 댓글 작성할 때 authService,currentUser의 정보를 받아서 닉네임 등을 같이 넣어준다든지, 내가 작성한 댓글에만 수정 삭제 버튼이 뜨도록 하는 부분 등 아직 수정할 부분이 많다.