[TIL] 5월 2일 기록

오늘의 할 일

• ✅ 📌 어제자 TIL - [내일 할 일] 확인
• ✅ 📌 ~20:00 팀 데일리 미션 출제
• ✅ 📌 ~23:59 멘토 데일리 미션 답변
• ✅ 📌 ~다음날 06:00 팀 데일리 미션 답변
• ✅ 📌 TIL 작성
• [React로 데이터 다루기] 2/3 수강
• ✅ week6 코드 리뷰 완료

 

오늘의 나는 무엇을 잘했을까?

• 면접 스터디에서 미리 준비하지 못한 질문을 받았는데, 아는 선에서 대답해서 어느 정도 안다는 느낌을 팀원들에게 준 것 같다! 하지만 간단하게 말한 수준이라 이 부분에 대해 따로 공부를 더 해야겠다!
• 페어 프로그램을 하기 이전에 팀원과 함께 어떤 식으로 할지 구상하는 시간을 보냈다. 서로 의견을 활발히 공유하고, 디자인 UI도 같이 보면서 어떤 식으로 구현해야할지 간단하게 얘기를 나눠보았는데, 처음보다 더 든든해져서 좋았다. 역시 막막해도 팀원들과 함께 해나가는 게 중요하단 걸 느낌!💪

 

오늘의 나는 무엇을 배웠을까? ⭐(중요체크)

한 컴포넌트에서 useEffect를 여러 번 쓸 수 있다.

useEffect(() => {
  console.log("렌더링 될때마다 실행되는 함수");
});

useEffect(() => {
  console.log("처음 한 번만 실행되는 함수");
}, []);

useEffect(() => {
  console.log("카운트 값이 업데이트 될 때만 실행되는 함수");
}, [count]);

useEffect(() => {
  console.log("이름이 바뀌었을 때만 실행되는 함수");
}, [name]);

 

제어 컴포넌트를 사용하는 걸 추천! 하지만 반드시 비제어 컴포넌트를 만들어야 하는 경우가 있다.

file input

• input으로 오는 값 중엔 파일도 가능하다.
• js에선 onChange 이벤트를 통해 e.target.files로 접근: 파일은 한 개 또는 여러 개 올 수 있기 때문에 유사 배열 형태로 return → 1개의 파일만 입력해도 files[0]로 접근해야 함

function FileInput() {
	const [value, setValue] = useState(null);
  const handleChange = (e) => {
    const nextValue = e.target.files[0];
    setValue(nextValue);
  };

  return <input type="file" vluae={value} onChange={handleChange} />; // 🚫
}

export default FileInput;

위처럼 file type의 input을 제어 컴포넌트로 만들면 오류가 난다.

⭐ 파일 input은 반드시 비제어로 만들어야 한다. = 보안상의 이유

자바스크립트에서 file input의 value의 값을 바꿀 수 없다. 해커가 문제있는 파일을 몰래 전송하면 안되기 때문에 html 보안 상 반드시 사용자쪽에서 값을 바꿀 수 있게 해야 한다.

정리) 사용자쪽에서 입력한 file을 받아서 state에 반영하더라도, state에선 file input의 value로 설정 X

 

따라서 아래와 같이 수정!

function FileInput() {
	const [value, setValue] = useState(null);
  const handleChange = (e) => {
    const nextValue = e.target.files[0];
    setValue(nextValue);
  };

  return <input type="file" onChange={handleChange} />; // ✅
}

export default FileInput;

그리고 input 컴포넌트는 form 태그로 감싸진다는 점을 이용해, state lifting으로 form 컴포넌트에서 state를 관리 가능(왜 부모에서 관리하는가? input이 여러개라면 부모 form에서 하나의 객체 state로 관리하는 것이 편리)

 

ref prop

ref = 원하는 시점에 실제 DOM 노드에 접근하고 싶을 때 사용

import { useEffect, useRef } from 'react';

function FileInput({ name, value, onChange }) {
  const inputRef = useRef();

  useEffect(() => {
		console.log(inputRef);
	}, []);

  return <input type="file" onChange={handleChange} ref={inputRef} />;
}

export default FileInput;

✅ DOM 노드는 반드시 렌더링이 끝나야 생기므로 ref 값을 얻기 위해선 우선 ref 객체의 current 값이 있는지 확인하는 것이 좋다. ref.current → 조건부 렌더링 등으로 컴포넌트가 사라지거나 하는 경우엔 ref 값이 없을 수 있기 때문

const inputRef = useRef();

if (inputRef.current) {
	// 이제부터 ref 사용 가능
	cosnole.log(inputRef)
}

 

html input의 value ≠ React input의 value

• html의 input vale prop은 초기값을 설정
• React의 input value prop은 Read only의 값이다. state로 지정하지 않으면 계속 value 값으로 고정된다.
• React의 input value 초기값은 defaultValue prop을 사용한다.
• React의 input value prop에 null이 들어가선 X. 대신에 undefined를 넣으면 값 입력이 가능하다.

 

오늘의 나는 무엇이 궁금했나?

• 커서 기반 페이지네이션에서, nextCursor에 해당하는 데이터가 서버에서 삭제되는 경우 에러가 발생하지 않을까?라는 궁금증이 생겼다. → 앤디의 말을 들어보니 cursor를 포함한 데이터들을 이미 가져왔기 때문에 그건 브라우저 메모리에서 저장되어 있어서 괜찮지 않을까란 얘기를 했다.

 

오늘 하루 회고

• 이번주 오프라인 첫날인만큼 더 집중해서 공부를 하려고 노력한 하루였다. 여전히 처음 배우는 것들이 많아서 많이는 흡수하지 못했지만, 직접 대면으로 팀원들과 만나서 공부 진행 사항이나, 데일리 스크럼으로 지식 공유를 하니까 서로 동기부여도 되고 중요한 시간이었다
• 하지만 여전히 공부진도가 많이 느려서 좀 더 개선해야겠음을 느꼈다. 하루 계획을 아무리 세워봤자 잘 지키지 못한다면 그건 좋은 계획이 아닌 것 같다. 내일은 좀 더 실현 가능성있게, 당장의 목표를 보고 갈 수 있도록 좀 더 조율하도록 해야겠다. 그리고 뭣보다 곧 있을 페어프로그래밍에 도움이 될 수 있도록 한 걸음 더 성장하도록 하자🔥🔥