React 입문수업 (2022년 개정판)

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. 오시영
    좋은 강의 감사합니다. 혹시 Nav 컴포넌트에서 props.onChangeMode(t.id);를 사용하지 않고 a태그의 id를 지정해서 가져오고 숫자로 변환하는 이유가 무엇일까요?
  2. 코딩두
    23.07.17
  3. 파시
    230711
  4. 어흥
    230710
  5. TTimotti
    id 태그에 값을 넣지 말고 그냥 바로 t.id로 받아오면 숫자로 받아지는군요. 꼭 id 태그와 event.target.id로 받아와야 하는 이유가 있는걸까요?
  6. sososo
    항상 양질의 강의 너무 감사드립니다!
    다 이해한 건 아니지만, 코딩을 하다보면 이해가 되는 날이 올거라고 믿어요.
    자바스크립트도 아직 안 들어서 많은 게 어렵고 거의 이해를 못한 수준이지만,
    이 강의를 듣고 제 프로젝트를 하면서 자바 스크립트 강의를 들으려고요!

    처음 이런 댓글을 다는 것 같은데, 계속 강의도 업데이트 해주시고,
    무엇보다도 이런 사이트를 만들고 유지해주셔서 너무나 감사할 따름입니다.
    다른 유로 강의도 들어봤지만, 이 강의만큼 설명을 명확하게 해주시는 곳은 없는 것 같아요.

    나중에 돈 많이 벌어서 꼭 후원자가 되고 싶어요.!
    그때까지 화이팅입니다!!

    아니 근데 목소리 너무 좋으시네요,
    정말 반했습니다.
  7. 정세환
    여기부터 이해가 너무 어렵네요 유튜브 재생목록에 있는 html,java,css는 전부 두번씩 돌려봤는데 제가 놓친 강좌가 있을까요?
  8. 콜라젤리
    귀르가즘 장난아니네요
  9. 당당
    2022.09.22
  10. MelonMusk
    08/20
  11. MelonMusk
    08/19
  12. 다람쥐
    감사합니다
  13. 코딩러버
    진짜 겁나어려워요...
  14. toonfac
    220704 오전 1시 19분 완료
  15. 라온
    다시 듣고 있는 데 확실히 이해가 더 잘 되네요. 근데 정말 이상한거는 id값을 console.log로 찍는데 저는 2번이 나와서 소스를 붙여넣기 해도 그러네요. ㅎㅎ
    강의 항상 감사드립니다.
  16. choi
    2022.04.17완료
  17. LLLEE
    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 자세히 보기