생활코딩

Coding Everybody

코스 전체목록

닫기

state

강의소개

컴포넌트 내부에서 사용하는 데이터인 state의 사용법을 소개합니다. 

 

 

 

강의

 

 

 

소스코드

변경점

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;

 

 

 

 

라이브 데모

 

댓글

댓글 본문
  1. 당당
    2022.09.22
  2. MelonMusk
    08/20
  3. MelonMusk
    08/19
  4. 다람쥐
    감사합니다
  5. 코딩러버
    진짜 겁나어려워요...
  6. toonfac
    220704 오전 1시 19분 완료
  7. 라온
    다시 듣고 있는 데 확실히 이해가 더 잘 되네요. 근데 정말 이상한거는 id값을 console.log로 찍는데 저는 2번이 나와서 소스를 붙여넣기 해도 그러네요. ㅎㅎ
    강의 항상 감사드립니다.
  8. 2022.04.17완료
  9. 22.04.04 완료
    component는 입력과 출력이 있다.
    입력: prop
    출력: return 값
    prop을 통해서 입력된 데이터를 우리가 만든 함수가 처리해서 return 값을 만들면
    그 return 값이 새로운 UI가 된다.

    -state
    prop과 함께 component함수를 다시 실행시켜 새로운 return값을 만들어주는 또하나의 데이터

    -prop, state 공통점
    prop과 state 모두 이 값이 변경되면 새로운 return 값을 만들어서 UI를 바꾼다.

    -prop, state 차이점
    prop: component를 사용하는 외부자를 위한 데이터
    state: component를 만드는 내부자를 위한 데이터

    -const [state, setState] = useState
    //useState는 React 16.8버전부터 추가된 Hook 중 하나로
    class component를 작성하지 않아도 state를 함수 component안에서 사용할 수 있게 해준다.

    setState라는 함수를 통해 state 업데이트 하고 새로고침 없이 component를 rendering 해준다.


    외부자, 내부자라는 개념이 뭔지 모르겠네요...
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기