[TIL] 날씨땜인가 왜케 졸령 오늘의 개발일지

 

오늘은 개발일지에 꼭 적고싶은 내용!!!!

바로 요 코드!!!!!!!!!!!!!!!!!!! (전체코드 아님주의, 그대로 복붙하면 에러나니까 잘보세용)

const AddToBe = ({
  route: {
    params: { toBeDetail },
  },
}) => {
  const [correctText, setCorrectText] = useState('');
  const [typingText, setTypingText] = useState('');
  const typingRef = useRef();

  const handleChangeClick = () => {
    if (typingText === correctText) {
      alert('오늘도 꿈에 가까워지기 성공!');
      // firebase에 오늘 날짜를 저장하는 함수를 추가해야 합니다.
    }
    if (typingText !== correctText) {
      alert('문장을 똑같이 입력해주세요!');
      typingRef.current.focus();
    }
  };

  useEffect(() => {
    setCorrectText(
      `나 ${authService.currentUser.displayName}는 ${toBeDetail.tobetitle}이다.`
    );
  }, []);

  return (
    <AddToBeContainer>
      <CustomH1>
        <TextInput>{correctText}</TextInput>
      </CustomH1>

      <AddToBeInputContainer>
        <CustomInput
          width={320}
          placeholder={correctText}
          ref={typingRef}
          value={typingText}
          onChangeText={setTypingText}
        />
      </AddToBeInputContainer>
      <TouchableOpacity onPress={handleChangeClick}>
        <CustomButton>변경하기</CustomButton>
      </TouchableOpacity>
    </AddToBeContainer>
  );
};

 

원래는 ref를 사용해서 <Text>에 있는 value값만 가져오려고 했는데, ref이름.current로 콘솔에 찍은 결과 매~~우 매우 복잡시러운 값들이 엄청 많이 나왔고, 그 복잡시런 값들 중에서도 우리가 원하는 value만 가져오려고 이것저것 난리를 다쳐봤으나

(innerText도 써봤음) 자꾸 undefined가 떴당

 

 

 

이걸로 2시간은 구글링하고, 이것저것 시도해봤는데 어림도 없지 하고 안되길래 나의 체력은 점점 지쳐갔고.....

refresh한 상태로 나의 코드를 봐줄 분들이 필요해땅 (도움!!!!!!!)

ㅇㅈ님께 여쭤봤는데, ㅇㅈ님이 같이 연구해주시다가 차라리 state를 하나 만들어서 그 state를 넣어보는건 어떻냐고 아이디어를 주셨고

state로 요래조래 데이터를 넣어보면서, input값과 유효성 검사 로직까지 완료를 시켜따!!!!!!!!!!!

ㅇㅈ님 복받으세여 🌸🌸🌸🌸

 

코딩을 하면서 점심,저녁시간을 오바해서 계속 매달리는일이 한두번이 아닌것같은데

이 모든게 나의 순도 100%로 의지로만 궁댕짝을 붙이고 있다는 사실이 코딩이한테(의인화) 참 감사한 것 같다

나를 이렇게 꾸준히 몰두시켜주는 너..최고야...

 

이래서 코딩 못끊uh ....

 

잡소리 그만하고, 오늘 했던 것들 정리하긩

 

<오늘 프로젝트 로직 구현>

• Main 페이지 :
  • Detail페이지로 이동 (특정글 클릭시 id 함께 전달)
• SingUp / Login 페이지 :
  • auth.currentUser 데이터가 있을시 Landing페이지로 이동하도록 로직 작성
• Detail페이지 :
  • 추가하기 버튼 생성
  • 추가하기 버튼 클릭시 AddToBe 페이지 이동 (AddToBe페이지에 toBeDetail 데이터 함께 전달)
  • Main페이지에서 전달받은 id로 특정게시물을 조회해오는 로직 작성
• AddToBe페이지 :
  • Detail페이지에서 전달받은 toBeDetail를 화면에 구성
  • 유저가 input 입력시 toBeDetail과 일치하도록 유효성 검사 로직 작성

 

<요건 오늘 새롭게 구현해본 코드>

 

https://warn-code.tistory.com/238

[리액트네이티브] 특정 페이지 로딩된 후 뒤로가기 막기 (navigation ,useFocusEffect, reset)