React state

https://www.youtube.com/watch?v=vmunrKR0uOU&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=7&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9 

conste mode= 'WELCOME';으로 하고

 

let content = null; 하고

 

만일 mode === 'WELCOME'이라면 

content = <Article title="Welcome" body ="Hello, WEB"></Article>태그를 둔다

 

그리고 {content}를 두면 

바뀐다

 

react state

 

import{useState} from 'react';로 react에서 제공하는 state를 import 한다 

기존의 welcome에서 useState('WELCOME');으로 바꿔준다

 

useState란배열이며

배열의 0번째는 상태의 값 즉 useState('WELCOME')의 상태값인 WELCOME을 가지고 있고 1번째는 f() 상태창의값을 변화시키는 함수를 가지고 있다

 

useState배열을 _mode변수에 넣고 

_mode[0]번째 값(상태값 여기서는'WELCOME')을 mode변수에 넣어준다

-mode[1]번째 값 상태값 변경 함수는 setMode에 넣어준다

위에 주석처리 된것과

밑의 const [mode, setMode] = useState('WELCOME'); 은 같다

 

밑에 기존에서 setMode()함수에 각각 welcome와 read를 넣어주어 상태 값을 변경해주고 onChangeMode 클릭을 해주면 

각각 바뀌어서 실행이 된다

 

 

const [id, setId] = useState(null);로 초기화를 시켜준다

onChangeMode가 일어났을때 어떤 태크가 클릭되었는지 알기 위해서 클릭한 해당 (_id)를 가져와서

setId(_id);로 상태값을 바꿔준다

for문으로 topics.length 길이만큼 반복하고 topicds[i]값과 setId(_id);로 불러온 상태값의 id가 같다면

title = topics[i].title;로 바꿔주고

body = topics[i].body;로 바꿔주고 

content 에서 title 과 body를 각각 바꿔준다 

 

결과