02 - 07 일지

하루 요약 : 과아아아아제에에에에

특이사항

HTML에 조금씩 익숙해졌다. 정확히는 JSX지만....ChatGPT가 꽤나 괜찮은 임시 강사 노릇을 해줬다. 자잘한 이해를 돕는데 도움이 되었다. 과제에서 요구하는 사항은 state항목의 생성, 삭제, 수정이었는데 이 중 수정이 꽤나 날 애먹였다. state의 불변성을 지켜야하는데, 수정을 거치면 아예 다른 새 배열을 만들어 할당하던지 아니면 리랜더링을 강제시킬지 양자택일이었다. 처음엔 후자를 시도했지만 리랜더링 강제가 별로 좋지 못하다는 다수의 자료를 보고 전자로 방향을 틀었다.

const completeOrUndoToDo = (id) => {
    //const newTodo = todo.map((list) => {if(list.id == id){list.isComplete ==false ?list.isComplete = true :list.isComplete = false}})
    //console.log(newTodo)
    //인덱스값이 id가 아니라 id값을 가진 인덱스를 찾아야해
    //const bool = todo[todo.find(index => index.id == id)].isComplete == true ?todo[id].isComplete = false :todo[id].isComplete = true;
    const ID =todo.find(index => index.id == id)
    const bool = ID.isComplete == true ?ID.isComplete = false :ID.isComplete = true;
    const newTodo = {...todo};
    ID.isComplete = bool;
    setIscomplete(() => {
      return newTodo
    })
    //이렇게 하지 말고 셋 스테이트 밖에 스프레드 문법을 써라
      /*if(todo[id].isComplete === false){
        console.log( 'affafa')
        todo[id].isComplete = true
        console.log(todo[id])
      }
      else{
        console.log("zzzzzz")
        todo[id].isComplete = false
        console.log(todo[id])
      }*/
      //setTodo([...todo, null])
  }

보이는가, 수정 하나 하려고 만든 수많은 흔적들.....하지만 여기서 스프레드 연산자랑 친해졌다. 아니지, 친구 당했다고 하는게 맞지...난 너랑 친해지고 싶지 않았어 이 녀석아.

 

정리

 

프롭스 칠드런

칠드런 프롭스의 구조는 <자식function명> 여기에 내용물이 들어간다아앙</자식function명>이다. 여는 태그와 닫는 태그 사이에 값을 넣으면 이것이 칠드런으로 인식이 되어서 일반 props처럼 진행된다. 그냥 태그 안에 넣는 기존 방법을 왜 안쓰고 이걸 쓰냐고 할 수 있는데, 이것을 사용하면 나오는 이점이 Layout.js를 활용할 때 편하다고 한다.

레이아웃으로 고정적인 양식을 만들고 그 아래에 컴포넌트를 받아온다 할 때, 고정 양식 밑에다 {props.children}으로 받아오는 것이다.

 

리액트 state

const [state, setState] = useState('초기값을 쑤셔넣는다아아앙')

const [count, setcount] = useState(0);

const [todoList, setTodoList] = useState([]);

state는 리액트에서 상당히 특이하다. state를 쓰는 목적은 UI를 바꾸기 위한 것이다. state는 변수 타입이다. state만 만든 것이 아니라 이를 제어할 수 있는 setState도 첨가하였다.

이렇게 특정한 기능을 수행하는 것들을 Hook이라고 부른다. 훅 = 함수

리액트 안에서 변경되어야 하는 값은 무조건 state로 선언해야한다.

const [name, setName] = useState('김치카레')
  <div>
    {name}<br />
    <button onClick={function (){setName("김차카라")}}>클릭</button>
  </div>
 
//이런 식으로 setState를 이용해 바꾸는 것이다.
<input value={name}//입력된 값을 어디다 꽂을지 찾아냄
       onChange={function(event){//이벤트.타겟.밸류로 우리가 타아핑한것을 챙긴다.
           setName(event.target.value)//위의 setName의 값을 입력값으로 바꾼다는 뜻
      }}
 

이런 식으로 입력값에 따라 const state를 바꿀 수 있다. event가 중요하다는 것을 잊지 마라.

 

불변성

메모리에 있는 값을 변경할 수 없어야 하는 것을 의미. 우리가 변수를 저장하면, 메모리에는 원시데이터(let 따위)를 저장하고, 이를 가리키는 주소값을 선언된 변수명에 저장한다. 그래서 같은 let값이 할당된 복수의 변수는 같은 메모리를 참조하기에 ===로 선언된다. 하지만 원시 데이터가 아닌 값은 불변성이 없다. 같은 ‘KIM’을 저장해도 다른 메모리에 할당되어 !==가 된다.

그래서 변수를 수정하면 새로운 값으로 바뀐 것처럼 보이지만, 엄밀히 말해선 다른 메모리주소에 저장된 새 원시데이터를 가져오는 것이다.

리액트에서는 화면을 리랜더링 할지 말지 결정하는 요소가 state의 변화유무를 따진다. state가 바뀐다? 리랜더링, 아니다? 가만 있는다.

그런데 state가 변했는지 아닌지를 따지는 방법은 state의 변화 전, 후의 메모리 주소를 따진다. 그래서 개발자가 값을 바꿔도 리액트는 state에서 차이를 찝어내지 못하고, 리렌더링이 일어나지 않는다.

 

순수함수

하나 이상의 인자를 받고, 인자를 변경하지 않고 참조해서 새로운 값을 리턴시키는 함수. 컴포넌트의 상당수 루틴은 순수 함수로 작성되기를 요구한다. state와 props가 같으면, 항상 같은 값을 반환해야 한다. 동일 입력, 동일 출력의 보장은 버그를 줄인다.

 

중복된 컴포넌트 처리하기

반복적으로 뭔가를 늘여놓을 때에는 map을 쓴다. 그런데 filter로 걸러야 하는 상황이라면 filter 다음에 map을 쓰면 된다.

 

key

렌더링한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 받아올 수 있다.

 

가상 돔

UI를 표현한 객체라고 게 설명할 수 있다. html과 xml문서의 프로그래밍 인터페이스다. 브라우저는 UI를 표현한 객체를 볼 수 없기에 DOM으로 건내줘야한다.

정리하면 메모리에 UI 객체를 올려두고 필요할 때 건내주는 것