[23.01.11] TIL

그동안 코로나로 TIL,WIL을 작성하지 못했다.

어제까지 격리로 아무데도 못가고 집에서 골골 앓았는데 프로젝트는 팀끼리 하는거라.. 피해 끼칠까봐 어떻게든 마무리하려고 했다.

그래서 오늘 update는 거의 완성했는데 한가지 문제만 해결하면 된다.

 

글 수정하기를 누르고 수정완료버튼을 누르지 않고 Navigator를 이용해 뒤로가기를 진행하게되면,

isEdit이 그대로 true 상태로 남아있다.

이렇게 되면 해당 글을 클릭해 상세페이지로 진입하게 됐을 때, 글을 볼 수 있는게 아니라 수정할 수 있는 화면이 보인다는게 문제이다.

알아 본 결과, Navigator가 항상 이전 페이지를 기억하고있지는 않는다고 하는데, 그럼 어떻게 해결을 했느냐.

 

1. Detail 페이지에서 Navigator의 setOptions를 이용해 이전 페이지로 이동할 수 있는 기능을 추가로 줬다.

useEffect(() => {
    navigation.setOptions({
      headerLeft: () => {
        return (
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <BtTitle>← 뒤로</BtTitle>
          </TouchableOpacity>
        );
      },
    });
  }, []);

 

2. Detail 페이지에서 삼항연산자를 통해 isEdit이 true일 때 인풋태그로 바뀌게 ui를 짜줬는데, Edit 페이지를 하나 만들어서 분리해줬다.

 

이렇게 하니 이 문제는 해결이 됐다.

근데 또 다른 문제가 생겼다..

하.. 하나 고치면 하나 생기고.. 그거 고치면 또 다른 에러가 생기고.. 에러의 덫인가....

데이터를 불러오려는데 갑자기 불러오려는 데이터가 object가 아니란다.

아니씨.. 왜이러는데 나한테 ㅠㅠㅠㅠ

에러가 나는 이유는 이랬다.

처음 js가 코드를 읽을 때, useEffect같은 것들은 빼고 일단 한번 읽고, 그 뒤에 읽을 때 나머지를 다 읽는다고 했다.

그러다보니 word라는 데이터 자체를 못읽어서 그렇다는 것,

이것은 옵셔널체이닝 (?) 으로 해결했다.

		<Section>
          <Title>단어</Title>
          <TextBox>
            <Text>{word?.word}</Text>
          </TextBox>
        </Section>
        <Section>
          <Title>의미</Title>
          <TextBox>
            <Text>{word?.mean}</Text>
          </TextBox>
        </Section>
        <Section>
          <Title>TMI</Title>
          <TextBox>
            <Text>{word?.tmi}</Text>
          </TextBox>
        </Section>

이렇게 해주니 잘 읽어왔다..

 

어렵다 어려워... ㅠㅠㅠ