240516 TIL_개인 프로젝트2 (To Do List 제작) > React 문법 (ustState, 스프레드 문법, 컴포넌트 분리, 비제어 컴포넌트)

useState 초기값 설정

  const [inputtitle, setInputtitle] = useState("");
  const [inputtodo, setInputToDo] = useState("");
  const [todolists, setToDoList] = useState([]);

초기값을 어떻게 넣느냐는 중요하다!
숫자는 0, 문자면 "", 배열이면 [], 객체면 null

to do list 중 input useState를 비제어 / 제어로 관리하는 방법에 대해 알아보는 중...

비제어 컴포넌트

input이 두 개여서, 따로따로 지정을 했는데, 튜터님과의 질문 끝에 input name 이라는 것을 알게 됐다! previos 재사용 법도~! useState()가 많은 게 뭐가 어때 싶을 수도 있지만, 컴포넌트 분리할 때 프롭스 전달이 짧아지니 훨씬 유용하고, 재사용 범위도 넓어져서 다음엔 인풋이 두 개만 되어도 꼭 튜터님께서 알려주신 것으로 할 예정이다.

방법은 이렇다.

const [formData, setFormData] = useState({
	formTitle : "",
    formContent : ""
});

const handleChange = (e) => {
	const { name, value } = e.target
    setFormData((prev) => {
    	...prev,
        [name] : value
    }
}

.
.
<form>
	<input type = "text" name = "formTitle" value = {formData.formTitle} onChange={handleChange} />
    <input type = "text" name = "formContent" value = {formData.formContent} onChange={handleChange} />
</form>

[] : 객체 리터럴 안에서 객체의 키(key)를 동적으로 설정할 때 사용

const handleChange = (event) => {
    setFormData((prev) => {
        const newFormData = { ...prev };
        newFormData[event.target.name] = event.target.value;
        return newFormData;
    });
};

헷갈려서 다시 풀어보면서 ... 이 와중에 const로 할당했는데 어...? 이게 ...? + 화살표 함수인데 리턴... 어?? 하면서 JS가 아직 많이 * 2929201010배 부족하다는 걸 또 알게 된다...

const newtodolist = { id: Date.now(), title: inputtitle, text: inputtodo, isDone: false } 

setToDoList([...todolists, newtodolist])

이거랑

setToDoList([...todolists, { id: Date.now(), title: inputtitle, text: inputtodo, isDone: false } ])

이거랑 같다.

세상에 진짜 정말이지 몰랐다... 근데 생각해보니 그렇다........ 변수가 저 자리 넣어져있을 뿐인데.... 약간 변수 만드는 것을 귀찮아해서 문법도 제대로 캐치 못했다!!

원시 타입과 참조 타입 관련 문서를 읽어보기.

event.target 이벤트가 발생한 노드

실무에서 많이 쓰는 아이디값
npm uuid : 전부터 많이 쓰는 값 (백엔드에서 자주 씀)
npm nanoid : 성능 + 간편성 (프론트엔드에서 자주 씀)
crypto.randomUUID()

개인과제 컴포넌트 분리 및 디벨롭
코드 리뷰
코드 리뷰 이후 복사 + todo 다시 만드는 작업 해보기 (formData로 인풋 만들어 보기, 삼항연산자 익숙해지기)
해설 강의
스탠다드반 강의 2배속 복습 (리액트 익숙해지기)
베이직 강의 올라와있으면 듣기!
스탠다드반 과제

git은 여전히 어렵다.

[회고록]
CSS가 숙제다....
CSS가 너무 감이 안 잡혀서, 개인 프로젝트 때마다 CSS로 고생하는 느낌이다. 그만 괴롭혀... 🥹

뭔가 어려웠던 컴포넌트 분리... 하다보니 프롭스 개념까지 대애애애충은 알게 된 듯 하다!

사실 아주 깔끔하게 분리하진 못했으나, 첫 프로젝트인 만큼 부모 - 자식 정도로 나눈 것에 의의를 두었다. 다음엔 더 위까지 한 번 나눠보기로....