[TIL_매달갯수사이트개발_트러블슈팅(2)] 1/22 아 이제 좀 알겠어요

1. 기억해! 함수에서 return 기준 위는 js, 밑은 jsx이다!!!

어제의 내가 방황했던 이유는 영역을 정확하게 인지하지 못해서였다는걸 알게 됐다

함수에서 리턴을 기준으로 위는 js, 밑은 jsx(html)인데 그걸 까먹어서 엄청 헷갈렸다

알게 된 후 까먹을까봐 주석으로 달아주고 시작했다

 

2. input은 form 안에 input은 form 안에

 

3. form 안의 버튼은 form에 onsubmit을 속성을 추가하면 자동으로 호출된다

    = onClick 추가하지 않아도 된다!

 

4. [Error] 버튼을 누르면 새로고침이 돼요

    아까 실시간 강의 들으면서 들었는데 기억이 나지 않았다
    찾아보니 event.preventDefault()라는 것을 알았다 
    자식 요소에 하나하나 달아줄 순 없으니 부모 태그 form에 달면 될 것 같다
   함수로 넣어줬다! 이제 버튼을 눌러도 새로고침 되지 않는다

5. [Error] 객체가 출력이 안돼요

input으로 들어온 값을 리스트에 추가하기 전에 먼저 기능을 구현해보려고 출력해보는데 에러가 났다

데이터가 일치하지 않아서라고 하는 것 같다

해결방법은 값 하나씩 찍어서 보내는 것이다

작아서 확대되어 흐릿하지만 잘 나온걸 확인할 수 있다 이제 이걸 이렇게 저렇게 리스트로 표현하면 된다

 

6. 컴포넌트 나누기

컴포넌트를 나누지 않고 app.jsx에 다 때려박았더니 너무너무너무 길어졌다

일단 기능별로 컴포넌트를 나눠보았다

먼저 크게 나누면서 에러를 고치고 작게 나눠나가면 된다

처음에는 익숙하지 않아서 어려웠는데 js에서 모듈화하는거랑 비슷하다!

부모한테 있는 값을 props로 넘겨주는데 이것도 함수에서 함수로 인자를 넘겨주는거랑 비슷했다

저 MedalForm이 새롭게 나눠준 파일명이고 list를 넘겨줬다

에러가 잔뜩 났고 하 어떻게 고칠지 막막하다

원래 배열이라서 list.map을 해줬던 list는 이상한 함수가 되어 돌아왔다

배열로 돌아와,,,,,,,,,

원인을 찾았다! 컴포넌트 나누는 과정에서 한 부분이 누락됐는데 그걸 몰랐다 휴

 

---

아주아주 중요한걸 배웠다

만들기 전에 어떻게 화면을 그릴지 생각을 하고, 정적인 UI를 기준으로 컴포넌트를 나누고, 정적인 UI를 먼저 만들고,

그 다음 state 다루는걸 만들면 더 쉽고 편하게 만들 수 있다는 것!!!

만들어진 컴포넌트를 나눌 때는 잘 연결됐는지 확인하면서 하나씩 해야 문제가 생겨도 바로 해결할 수 있다는 것!!!

 

오늘은 컴포넌트는 다 나누고 자야겠다