React #6 state

prop과 달리,

state는 컴포넌트를 만드는 내부자를 위한 데이터.

 

먼저

import {useState} from 'react'

임포트 시킨다.

 

const [mode, setMode] = useState('WELCOME');

const [id, setId] = useState(null);

상태로 사용을 위해 위와 같이 useState 함수에 'WELCOME'과 같은 초기값을 인자로 전달하여 사용한다.

이때 useState는 배열을 return하는데 index0은 상태값을, index1은 상태값 변경 위한 함수를 return해준다.

 

const topics = [

{id:1, title:'html', body:'html is ...'},

{id:2, title:'css', body:'css is ...'},

{id:3, title:'javascript', body:'javascript is ...'}

]

 

let content = null;

 

if(mode === 'WELCOME'){

content = <Article title="Welcome" body="Hello, WEB"></Article>

} else if(mode === 'READ'){

let title, body = null;

for(let i=0; i<topics.length; i++){

if(topics[i].id === id){

title = topics[i].title;

body = topics[i].body;

}

}

content = <Article title={title} body={body}></Article>

}

 

return (

<div>

<Header title="WEB" onChangeMode={()=>{

setMode('WELCOME');

}}></Header>

<Nav topics={topics} onChangeMode={(_id)=>{

setMode('READ');

setId(_id);

}}></Nav>

{content}

</div>

);

setMode 함수를 통해 App() 함수가 리로드되며

mode가 'WELCOME'이 아닌 'READ'로 바뀐다.

 

 

 

위의 코드 중

for(let i=0; i<topics.length; i++){

if(topics[i].id === id){

title = topics[i].title;

body = topics[i].body;

}

}

에서

topics[i].id === id

중

topics[i].id는 숫자지만

id는 문자이다.

이는

function Nav(props){

const lis = []

for(let i=0; i<props.topics.length; i++){

let t = props.topics[i];

lis.push(<li key={t.id}>

<a id={t.id} href={'/read/'+t.id} onClick={event=>{

event.preventDefault();

props.onChangeMode(event.target.id);

}}>{t.title}</a>

</li>)

}

return <nav>

<ol>

{lis}

</ol>

</nav>

}

에서

event.target.id

이 받아온 id는 숫자에서 a id={t.id}에 의해 <a> 태그로 변환,

즉 문자로 변환되었기 때문이다.

 

따라서

props.onChangeMode(event.target.id);

대신

props.onChangeMode(Number(event.target.id));

로 작성하면 숫자로 다시 컨버팅이 가능하다. Number()는 JS의 숫자 컨버팅 함수.

 

따라서 최종 코드는 다음과 같다.

import logo from './logo.svg';

import './App.css';

import {useState} from 'react';

 

function Article(props){

return <article>

<h2>{props.title}</h2>

{props.body}

</article>

}

function Header(props){

return <header>

<h1><a href="/" onClick={(event)=>{

event.preventDefault();

props.onChangeMode();

}}>{props.title}</a></h1>

</header>

}

function Nav(props){

const lis = []

for(let i=0; i<props.topics.length; i++){

let t = props.topics[i];

lis.push(<li key={t.id}>

<a id={t.id} href={'/read/'+t.id} onClick={event=>{

event.preventDefault();

props.onChangeMode(Number(event.target.id));

}}>{t.title}</a>

</li>)

}

return <nav>

<ol>

{lis}

</ol>

</nav>

}

function App() {

const [mode, setMode] = useState('WELCOME');

const [id, setId] = useState(null);

const topics = [

{id:1, title:'html', body:'html is ...'},

{id:2, title:'css', body:'css is ...'},

{id:3, title:'javascript', body:'javascript is ...'}

]

let content = null;

if(mode === 'WELCOME'){

content = <Article title="Welcome" body="Hello, WEB"></Article>

} else if(mode === 'READ'){

let title, body = null;

for(let i=0; i<topics.length; i++){

console.log(topics[i].id, id);

if(topics[i].id === id){

title = topics[i].title;

body = topics[i].body;

}

}

content = <Article title={title} body={body}></Article>

}

return (

<div>

<Header title="WEB" onChangeMode={()=>{

setMode('WELCOME');

}}></Header>

<Nav topics={topics} onChangeMode={(_id)=>{

setMode('READ');

setId(_id);

}}></Nav>

{content}

</div>

);

}

 

export default App;