[항해99 3주차] - react 개인 과제 엎어버리기

 

 

기술매니저님과 면담 후에

스스로에게 들었던 생각

 

'리액트를 왜 쓰는지도 모른채로 좋다니까 사용하고 있었구나'

 

 

리액트는 기본적으로

가상 DOM을 사용하여 필요한부분만 렌더링하기 때문에

DOM에 직접 접근하면 안된다.

 

 

 

let title_input = document.querySelector('.title-input')

이런식으로 직접접근하면 안된다는 것이다

 

 

input태그 두개를

저따구로 제어해놓고

3일만에 개인과제 끝냈다고 좋아하던

오만한 나의 모습을 반성합니다.

 

 

그럼

어떤식으로 접근을 해야하느냐?

 

ref 훅을 사용하든지 아니면

state와 props를 사용하는 것이다.

 

ref도 

꼭 필요할때만 사용해야한다.

(권장되는 방식은 아닌듯..)

 

 

 

 

onChange함수와

구조분해할당을 이용해서

DOM을 리액트스럽게 제어해보자.

 

 

<input type="text" name="title" onChange={onChange} value={title} className="title" autoFocus></input>
<input type="text" name="content" onChange={onChange} value={content} className="content"></input>

 

 

name,value,onChange 속성을 추가해주었다.

 

 

 

Form.jsx

  let [ id, setId ] = useState(0);


  const [ inputs, setInputs ] = useState({
    key: id,
    title: '',
    content: '',
    isDone: '완료!'
  });


  const { title, content } = inputs;


  const onChange = (e) => {
    const {value, name} = e.target
    setInputs({
      ...inputs,
      [name]: value
    })
  }

  const set_arr = () => {
    let arr_1 = [...arr]
    arr_1.push({...inputs, key: id})
    setArr(arr_1)
    setId(id => id + 1)
    console.log(arr_1)
  }

 

 

 

 

 

 

 

 

코드 하나하나를 뜯어보면

id라는 state와

inputs라는 state

를 각각

0과 객체로 선언을 해주었다.

 

 

inputs.title, 

inputs,content 와 같이 사용하지않고

title, content만으로 변수를 사용할 수 있게

 

inputs라는 객체를

구조분해하여

뽑아왔다. 

이제 title이랑 content를 input태그의 value속성으로 사용할 수 있게 된 것!

 

 

 

Form.jsx

  const onChange = (e) => {
    const {value, name} = e.target
    setInputs({
      ...inputs,
      [name]: value
    })
  }

  const set_arr = () => {
    let arr_1 = [...arr]
    arr_1.push({...inputs, key: id})
    setArr(arr_1)
    setId(id => id + 1)
    console.log(arr_1)
  }

 

 

벨로퍼트 쓰앵님의 강의자료를 인용하여

onChange함수로

한번에 input태그 두개를 제어해보았다.

 

 

위의 두 함수는

지금까지 내가 짠 코드 중 가장 섹시한 코드라고 생각하고싶다.

 

구조분해로 이벤트가 발생한 input태그의

value와 name을 각각 가져온다음

객체를 전개연산자로 풀어헤친다.

 

 

그리고 

[name]: value

 

이부분 때문에 진짜 골머리를 썩었는데

이해하고나니 정말 섹시하고 지저분한 문법이었다.

 

 

객체의 key값을 동적으로 할당할 때

이렇게 대괄호를 이용하는데

e.target.name : e.target.value랑 마찬가지인 것!

 

 

그 외에 다른 key값은 전개연산자를 이용하여

그대로 둔다.

 

이벤트가 발생한부분만 동적으로 할당하는 것이다!

 

 

 

 

set_arr함수는 추가하기 버튼을 눌렀을 때

 

기존의 배열을 얕게 복사한뒤 

마찬가지로 

전개연산자를 이용해 나머지는 그대로두고

key값만 id로 새로 덮어씌우는 것이다.

 

 

이 부분도 애를먹었는데

기술매니저님께서

도움을 주셔서 해냈다 ㅠ

 

 

 

기존에 배열에 객체를 push하는 방법을

    arr_1.push(inputs)

이렇게 사용했었지만 

이상하게도 

state로 선언한 id값이 1씩 증가하질 않았다..

 

 

key값이 계속 0이어서 왜그런가 했더니

state를 업데이트해서

 

위에

    arr_1.push({...inputs, key: id})

 

이런식으로 덮어씌워줘야

 

key 값이 1씩 증가한다.

 

 

사실 이부분은 원리를 정확히모르겠는데

아마 매니저님께서 도와주시지않았다면

혼자서는 절대 생각하지 못했을 것 같다...

 

 

 

 

 

 

또 애먹었던 부분이 Delete였는데

splice함수와 e.target을 사용하려했으나

자꾸 key값이 오류나서

그냥 filter함수를 이용해 선택한 key값과 다른 투두 객체들만 반환하여

삭제를 완료했다

 

 

 

이렇게 개인과제 끗!

 

 

 

 

 

마감 하루전에 코드를 뒤집어 엎어야했기에 

조급했지만 꾸역꾸역해냈다........

 

 

대신 수확은 있었다.

 

 

 

구조분해할당에 대한 완벽한 이해와

임기응변 경험치 상승

어떻게든 마무리해낼 수 있다는 자신감

 

정도를 꼽을 수 있을 것 같은데

 

구조분해할당은 따로 포스팅할만한

가치가 있는 것 같다!

 

 

 

이렇게 리액트 개인과제를 마무리했고

 

내일부터는 새로운 조와 함께

2주차 개인과제를 시작해보자

 

 

커밍 쑨!!!!!!!!!!!!!!