
✅react state
prop과 state 모두 값이 변경되면 새로운 return값을 만들어서 ui를 바꾼다. 하지만
prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고
state는 컴포넌트를 만드는 내부자를 위한 데이터이다.
function App() {
const mode = 'READ';
const topics = [
{id:1 , title:'html', body:'html is ....'},
{id:2 , title:'css', body:'html 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'){
content = <Article title="Read" body="hello, read"></Article>
}
return (
<div className="App">
<Header title="react" onChangeMode={()=>{
mode = 'WELCOME';
}}></Header>
<Nav topics={topics} onChangeMode={(id)=>{
mode = 'READ';
//이때 nav 안에 있는 값을 눌러도 APP함수는 다시 실행되지 않기 떄문에 return값에는 변화가 없다.
//즉 nav를 누르면 mode 가 read가 돼서 article값이 변화해야 하는데 변하지 않음
}}></Nav>
{content}
</div>
);
}
export default App;
content를 변수로 설정하고 if문의 조건값에 따라 <article/>이 바뀐다.
const mode = 'READ' 의 mode를 state를 활용해 값을 바꾸고 그 값에 따라 App 컴포넌트가 새로 실행되게끔 바꿀 것이다.
✅usestate
usestate는 배열을 return 하고 0번 째 값은 상태의 값을 읽을 때 사용하고 1번 째 값은 상태의 값을 변경하는 함수로 사용된다.
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 App() {
// const _mode = useState('welcome');
// const mode = _mode[0];
// const setMode = _mode[1];
const [mode, setMode] = useState('WELCOME');
const topics = [
{id:1 , title:'html', body:'html is ....'},
{id:2 , title:'css', body:'html 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'){
content = <Article title="Read" body="hello, Read"></Article>
}
return (
<div>
<Header title="WEB" onChangeMode={()=>{
setMode = ('WELCOME');
}}></Header>
<Nav topics={topics} onChangeMode={(id)=>{
setMode('READ');
}}></Nav>
{content}
</div>
);
}
export default App;
1. mode의 값이 setMode로 인해 read로 바뀜
2. App 컴퍼넌트가 다시 실행됨
3. 그러면 useState가 mode의 값을 read로 셋팅함
4. 그러면 mode의 값을 read로 읽고 화면에는
※mode의 값은 이름을 아무거나 해도 됨
✅최종코드
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function Header(props){
console.log('props',props.title);
return (
<header>
<h1><a href='/read/' 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));
// Number 안하면 id값 문자로 인식해서 안됨
}}>{t.title}</a></li>)
}
return (
<nav>
<ol>
{lis}
</ol>
</nav>
)
}
function Article(props){
return (
<article>
<h2>{props.title}</h2>
{props.body}
</article>
)
}
function App() {
// const _mode = useState('welcome');
// const mode = _mode[0];
// const setMode = _mode[1];
const [mode, setMode] = useState('WELCOME');
const [id, setId] = useState(null);
// 아직 선택된 값은 없으니깐 초기값을 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++ ) {
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)
// _id "붙이면 문자로 인식해서 실행 안됨
// nav 안에 li 클릭하면
}}></Nav>
{content}
</div>
);
}
export default App;
초기의 mode를 WELCOME로 설정해 브라우저에는 Welcome hello,WEB이 보인다. 여기서 nav li 안에 있는 topics를 클릭하면 mode가 READ로 셋팅되고 각 id값과 일치하는 원소를 찾아서 title과 body의 값이 브라우저화면에 띄어진다.
setId(_id)의 _id 값은 어디서 만들어질까? -> nav안에 있다. -> 우리는 event.target.id 값으로 id의 값을 알아내고 있다.
우리가 입력한 값은 숫자였는데 {}태그의 속성으로 넘기면 문자가 된다. 그래서 Number( event.target.id ) 으로 바꿔줘야한다!
'Frontend > React' 카테고리의 다른 글
7일차 - react update (0) | 2023.02.13 |
---|---|
6일차 - react create (0) | 2023.02.12 |
4일차 - react 이벤트 기능 (0) | 2023.02.02 |
3일차 - react component 와 props (0) | 2023.02.01 |
2일차 - react 수정과 배포 (0) | 2023.01.29 |

✅react state
prop과 state 모두 값이 변경되면 새로운 return값을 만들어서 ui를 바꾼다. 하지만
prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고
state는 컴포넌트를 만드는 내부자를 위한 데이터이다.
function App() {
const mode = 'READ';
const topics = [
{id:1 , title:'html', body:'html is ....'},
{id:2 , title:'css', body:'html 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'){
content = <Article title="Read" body="hello, read"></Article>
}
return (
<div className="App">
<Header title="react" onChangeMode={()=>{
mode = 'WELCOME';
}}></Header>
<Nav topics={topics} onChangeMode={(id)=>{
mode = 'READ';
//이때 nav 안에 있는 값을 눌러도 APP함수는 다시 실행되지 않기 떄문에 return값에는 변화가 없다.
//즉 nav를 누르면 mode 가 read가 돼서 article값이 변화해야 하는데 변하지 않음
}}></Nav>
{content}
</div>
);
}
export default App;
content를 변수로 설정하고 if문의 조건값에 따라 <article/>이 바뀐다.
const mode = 'READ' 의 mode를 state를 활용해 값을 바꾸고 그 값에 따라 App 컴포넌트가 새로 실행되게끔 바꿀 것이다.
✅usestate
usestate는 배열을 return 하고 0번 째 값은 상태의 값을 읽을 때 사용하고 1번 째 값은 상태의 값을 변경하는 함수로 사용된다.
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 App() {
// const _mode = useState('welcome');
// const mode = _mode[0];
// const setMode = _mode[1];
const [mode, setMode] = useState('WELCOME');
const topics = [
{id:1 , title:'html', body:'html is ....'},
{id:2 , title:'css', body:'html 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'){
content = <Article title="Read" body="hello, Read"></Article>
}
return (
<div>
<Header title="WEB" onChangeMode={()=>{
setMode = ('WELCOME');
}}></Header>
<Nav topics={topics} onChangeMode={(id)=>{
setMode('READ');
}}></Nav>
{content}
</div>
);
}
export default App;
1. mode의 값이 setMode로 인해 read로 바뀜
2. App 컴퍼넌트가 다시 실행됨
3. 그러면 useState가 mode의 값을 read로 셋팅함
4. 그러면 mode의 값을 read로 읽고 화면에는
※mode의 값은 이름을 아무거나 해도 됨
✅최종코드
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function Header(props){
console.log('props',props.title);
return (
<header>
<h1><a href='/read/' 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));
// Number 안하면 id값 문자로 인식해서 안됨
}}>{t.title}</a></li>)
}
return (
<nav>
<ol>
{lis}
</ol>
</nav>
)
}
function Article(props){
return (
<article>
<h2>{props.title}</h2>
{props.body}
</article>
)
}
function App() {
// const _mode = useState('welcome');
// const mode = _mode[0];
// const setMode = _mode[1];
const [mode, setMode] = useState('WELCOME');
const [id, setId] = useState(null);
// 아직 선택된 값은 없으니깐 초기값을 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++ ) {
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)
// _id "붙이면 문자로 인식해서 실행 안됨
// nav 안에 li 클릭하면
}}></Nav>
{content}
</div>
);
}
export default App;
초기의 mode를 WELCOME로 설정해 브라우저에는 Welcome hello,WEB이 보인다. 여기서 nav li 안에 있는 topics를 클릭하면 mode가 READ로 셋팅되고 각 id값과 일치하는 원소를 찾아서 title과 body의 값이 브라우저화면에 띄어진다.
setId(_id)의 _id 값은 어디서 만들어질까? -> nav안에 있다. -> 우리는 event.target.id 값으로 id의 값을 알아내고 있다.
우리가 입력한 값은 숫자였는데 {}태그의 속성으로 넘기면 문자가 된다. 그래서 Number( event.target.id ) 으로 바꿔줘야한다!
'Frontend > React' 카테고리의 다른 글
7일차 - react update (0) | 2023.02.13 |
---|---|
6일차 - react create (0) | 2023.02.12 |
4일차 - react 이벤트 기능 (0) | 2023.02.02 |
3일차 - react component 와 props (0) | 2023.02.01 |
2일차 - react 수정과 배포 (0) | 2023.01.29 |