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. Sansol Park
    Nav 컴포넌트에서 props.onChangeMode(t.id)를 직접 사용하지 않고, a 태그에 id를 지정하여 이벤트 객체에서 id를 가져오고 숫자로 변환하는 방식을 사용하는 이유는 React에서 이벤트 핸들링을 할 때, 각 이벤트가 발생하는 요소에 대한 정보를 이벤트 객체를 통해 접근하기 때문입니다.

    이 코드에서 a 태그에 id를 지정하고, 클릭 이벤트가 발생했을 때 event.target.id를 통해 해당 id를 가져오는 방식은 다음과 같은 이점이 있습니다:

    유연성: id를 event 객체에서 가져오는 방식은 이벤트가 발생하는 요소에 대한 정보를 직접 참조할 수 있기 때문에, 동적으로 변화하는 리스트나 컴포넌트에 유연하게 대응할 수 있습니다.


    재사용성: 같은 함수를 여러 요소에 재사용할 때, 각 요소의 특정 데이터(여기서는 id)를 기반으로 다른 동작을 할 수 있어서, 컴포넌트의 재사용성을 높여줍니다.

    성능: props.onChangeMode(t.id)를 사용할 경우, 각 a 태그에 대해 새로운 함수 인스턴스를 생성해야 합니다. 하지만 event.target.id를 사용하면, 동일한 함수를 여러 a 태그에서 공유할 수 있으므로, 메모리 사용량을 줄이고 성능을 향상시킬 수 있습니다.

    명시성: event.target을 사용하면 이벤트가 발생한 정확한 요소를 지정하는 것이 명시적이기 때문에, 코드를 읽는 다른 개발자에게 이해하기 쉬운 코드를 제공합니다.

    그러나 event.target.id를 사용할 때는 id 값이 항상 문자열로 반환되기 때문에, Number(event.target.id)를 사용하여 명시적으로 숫자로 변환해주어야 하는데, 이는 JavaScript에서 DOM 요소의 id가 문자열로 처리되기 때문입니다. 따라서 id 값으로 숫자를 기대하는 로직이 있다면, 이를 숫자 타입으로 변환해주어야 합니다.

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

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

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

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