[TIL] 잠이 와요 잠이 와_221201

TodoList 마무리

< 기술 매니저님 피드백 >

1. [key]

const [inputs, setInputs] = useState({
    title: "",
    content: "",
  });
//input들의 초기값 선언

  const { title, content } = inputs;
//비구조화 할당을 통해 값 추출

  const onChange = (event) => {

    const { name, value } = event.target;

    setInputs({
      ...inputs,
      [name]: value,
    });
    

  };

Q: 여기서 name과 value 둘 다 있어야 하는지? value 하나만 넘겨줄 수는 없는지? name과 value과 input의 속성을 뜻하는 게 맞는지? name말고 다른 것을 key로 쓸 수 있는지?

A: [key]가 있어야 input에 입력된 값이 title인지 content인지 알 수 있음. (Form.jsx) input의 속성으로 name, value를 지정했다. 보통

name을 많이 쓴다. input의 onChange의 경우 위와 같은 형태를 많이 띈다.

 

- event.target

: event가 일어난 element, 여기서는 button을 뜻한다.

 

- ...inputs

: setter state 전체 input value를 하나의 객체 넣음.

title, content가 있는 기존의 input객체를 ...spread 연산자로 얕은 복사함.

 

- [key]

: value, 어떤 key값의 value인지 구분해야 함!
name 키를 가진 값을 value로 설정한다는 뜻

2. props

      <List toDos={toDos} onRemove={onRemove} onToggle={onToggle} />

component 태그 안 property, props 로 자식 comp에게 state를 내려보내줌. props에 모든 타입의 변수 함수 형태 모두 가능.

*toDos는 변수, onRemove 및 onToggle은 함수 

 

3. div 안에 새로운 데이터가 어떻게 들어가는지?

      <div className="list-wrapper">
        {toDos
          .filter((todo) => todo.isDone === false)
          // = .filter((todo) => !todo.isDone)
          .map((todo) => (
            <Todo
              todo={todo}
              key={todo.id}
              onRemove={onRemove}
              onToggle={onToggle}
            />
          ))}      
      </div>

list-wrapper 안에 {자바스크립트로 만든 새로운 배열}이 들어가는 것이니 list-wrapper가 여러개 생기는 것인지?

A: <Todo ~ /> 가 여러개 생기는 것

 

+ map( ) 함수 : map(() => ( <Todo props ~~~ /> ) 이렇게 쓰면 return이 default이나,

map((x) => {return <Todo props ~~~ />})

이런 식으로 중괄호 {} 를 쓰면 반드시 return을 안에 넣어줘야 화면에 렌더링됨

< 코드 리뷰 >

- 프로젝트 깃허브에 올릴 때는 console.log() 주석처리해주면 좋음

- todo.isDone === false ? 보다 todo.isDone으로 적어주는 게 더 깔끔함

+ 더 알아보기

Event.stopPropagation()

이벤트 버블링 : 하위에 먼저 그 다음 상위에 이벤트가 일어남 계속 위로 전해지는게 디폴트

보통 하위요소에만 이벤트 발생시키고 싶을 때 event.preventDefault 쓰면 상위에 이벤트가 안일어남

버블링이 생기면 의도하지 않는 이벤트가 발생될 수 있음

ex) onClick 시 하위 요소에 모달 띄우기, 상위 요소에 페이지 이동 이벤트가 넣었다고 가정하면 하위 요소 버튼을 클릭할 때 의도와 다르게 페이지 이동이 생길 수 있음!

 

불변성

*원시 타입 ex) 숫자 과 객체 타입 ex) 배열 이 있는데 객체타입의 경우 메모리 

리액트는 불변성 메모리 주소가 바뀌어야 인지함

객체를 다시 할당해주어야 인식함

ex)

let object = {key: value} //주소 값이 1이라고 하면

object.key = value1 //이렇게 하면 주소 값이 같음

object = {key: value2} //주소값이 2로 바뀌어서 인지 가능

 

*Json 가상 서버

 

👊🏻 오늘 한 일

• 10시 리액트 입문 주차 시험
• [프로그래머스] 34. 모의고사(미완)
• Browser Rendering
• TodoList 전체 코드 리뷰
• 트러블 슈팅, 추가 기능 설명
• git push, README
• 영상 촬영 및 업로드
• 21시 입문 주차 문제 풀이 세션
• 22시 기술매니저님 피드백

😲 오늘 느낀 점

하루가 정말 길다. 잠을 줄이니 단어가 생각이 안난다. 입문 주차 시험이 2시간이었는데 배포까지 하니 10분이 더 지나있었다. 1시간 안에 끝낼 수 있을 것 같았는데 중간중간 오류가 나서 시간을 다 채워서 끝냈다. 뭔가 분하기도 하고 속상하기도 해서 기분이 별로였는데 위로를 받으니 갑자기 눈물이 핑돌았다. 더 빨리 잘하고 싶었는데 억울했다. 고작 며칠 공부해놓고 잘 하길 바라는 게 욕심이겠지만 내가 욕심이 많나보다. 1시간만 속상해하다가 다시 열심히 해야겠다고 생각했다.

점심으로 수육을 먹으니 배가 든든해져서 그런지 기분이 나아졌다. 단순한 나란 사람^^ 팀과제를 간단하게 끝내놓고 어제 못다쓴 글들을 쓰고 업데이트한 파일로 깃허브에 다시 push하고 README도 꾸미고 웹 구동 영상도 만들어서 업로드하고 문제 풀이 세션을 틀어놓고 공부하다가 기술매니저님께 폭풍 질문하고 피드백 받은 걸 정리했다. 중간에 알고리즘 문제도 풀었는데 운동하고 와서 리액트를 공부하다가 까먹었다. 새벽 1시 30분, 잠온다. 내일은 벌써 리액트 숙련 주차 시작이다! 2주 뒤에 미니 프로젝트 시작이라니!! 무섭다... 리덕스 다들 입을 모아 어렵다고 하는데 얼마나 어려운 걸까?! 일단 자고 내일의 나에게 맡기자

👏🏻 오늘의 칭찬

궁금한 걸 다 물어봤다.

🤔 오늘 아쉬운 점

생각해보니 괜히 울었다. 민망;

⛵️ 내일 할 일

• [프로그래머스] 34. 모의고사 git push
• 입문 주차 팀 notion 내용 쭉 읽어보기
• 리액트 강의 듣기
• 미뤄둔 것 좀 하기