[생활코딩] state(에러)

state=리액트 컴퍼넌트

컴퍼넌트는 입력(Prop)과 출력(return)

Prop과 함께 컴퍼넌트 함수를 다시 실행해서 새로운 리턴 값을 만들어주는 데이터는 state이다.

Prop과 State 모두 이 값이 변경되면 새로운 리턴 값을 만들어서 UI를 바꾼다.

이들의 차이점은 Prop은 컴퍼넌트를 사용하는 "외부자"를 위한 데이터고 state는 컴퍼넌트를 만드는 "내부자"를 위한 데이터이다.

 

1. function App()에 const mode = 'WELCOME' 작성하기, const topics = {} 작성하기
2. if(mode === 'WELCOME'), else if(mode === 'READ') 작성하기
3. 그 위에 let content = null; content 변수 만들기
4. mode가 welcome일때 content, mode가 read일때 content 지정하기
5. content 변수가 출력되게 처리하기
6. mode 값이 welcome일때랑 read일때랑 값이 다르게 보이는 걸 확인하기
7. mode 값을 이벤트가 발생했을 때 변경해주는 것을 해야 함
8. mode의 값을 WELCOME, READ로 바꾸기
9. App 함수는 다시 실행되지 않아서 return 값에는 변화가 없음을 알기
10. mode의 값이 바뀌면 컴퍼넌트 함수가 새로 실행되면서 새로운 return 값이 만들어지고 그 return 값이 UI에 반영되는 걸 생각해야 한다.
11. 이 때 state를 사용하기
12. state를 사용하기 위해서는 import를 하고 useState라는 hook을 사용해야 함. import {useState} from 'react';
hook은 react에서 제공하는 기본적인 함수.
13. mode는 지역변수인데 지역변수를 state 상태로 업데이트 시키기
14. App 함수에서 const mode = 'WELCOME';을 const mode = useState('WELCOME');으로 바꾸기
15. state를 만들면 return이 되는데 그 결과를 _mode라고 이름을 짓기
16. 즉, const _mode = useState('WELCOME');이 됨
17. _mode 값을 찍기 위해서 console.long('_mode', _mode);라고 작성하고 개발자 도구를 켠다. WELCOME이 0번째 원소라는 것을 알 수 있고 1번째 원소는 함수라는 것.
18. useState는 배열을 return하고 배열의 0번째 원소는 상태의 값을 읽을 때 사용. 1번째 데이터는 그 상태의 값을 변경할 때 사용하는 함수.
19. 즉, const mode = _mode[0];는 mode 값을 통해서 상태의 값을 읽을 수 있기
20. const setMode = _mode[1];는 1번째 원소인 setMode를 통해서 mode의 값을 바꾸기
21. 이를 단순하게 바꾸면 const [mode, setMode] = useState('WELCOME');이 됨
22. Header 태그와 Nav 태그에 있는 mode는 값을 바꿔야 하므로 setMode라고 바꾸어 주기 setMode('WELCOME'); 형식.
23. mode의 값이 setMode로 인해서 read로 바뀜. 그러면 App 컴퍼넌트가 다시 실행돼서 useState가 mode의 값을 read로 세팅해주기. 그래서 화면에 랜더링 되면 바뀌어 나타남
24. html, css, javascript를 눌렀을 때 각각의 내용이 나오게 하기
25. const [id, setId] = useState(null); 현재 값이 선택되지 않아서 null로 초기값을 지정. state의 값은 내부를 눌렀을때 바뀜.
26. Nav의 id 값을 바꿔야 하므로 헷갈리지 않게 _id로 이름을 지정하고 setId(_id)를 작성.
27. 반복문을 이용해서 id와 id State가 일치하면 topics의 title과 title을 일치, topics의 body와 body를 일치시킴
28. content의 title은 {title}과 일치, body는 {body}와 일치시킴

문자를 숫자로 컨버팅 하는 건 (Number());

문자를 숫자로 컨버팅 하기 위해 (Number());을 사용하면 에러가 뜬다. 왜?

에러)

Uncaught TypeError: Cannot read properties of null (reading '0')

The above error occurred in the <App> component: