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

props

강의소개

컴포넌트의 입력값인 props를 사용하는 방법을 소개합니다. 

 

 

 

강의

 

 

 

소스코드

변경점

import logo from './logo.svg';
import './App.css';
function Header(props){
  console.log('props', props, props.title);
  return <header>
    <h1><a href="/">{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 href={'/read/'+t.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 topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'javascript', body:'javascript is ...'}
  ] 
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

 

 

 

 

라이브 데모

 

댓글

댓글 본문
  1. 남윤서
    2024.07.13
  2. 야생의코린이
    2024-06-14 완료
  3. 감자순대
    24.05.23
  4. 꽁코딩
    23.12.28
  5. Jaehong Jun
    23.11.28
  6. Kim Gun-Woo
    23.08.24
  7. 코딩두
    23.07.15
  8. 파시
    230710
  9. 어흥
    230710
  10. 바르다
    javascript 공부해보시는건 어떠실까요? HTML CSS javscript문법을 제외한 문법이 raeact 문법입니다.
    보통 ""혹은 '' 는 문자열을 담고 = 은 변수를 저장하고 []배열을 담고 {}는 함수에서 실행문을 담습니다.
    하지만 react에서 {}는 함수에 props를 정의하고 그 실행문을 호출 할 경우 {}에 담아서 호출하고있네요
    제어문이나 반복문이 있으며 react와 관련된 언어인 javscript를 공부해 보시면 도움이 될 것같습니다.
    대화보기
    • 메론소다맛젤리
      혹시 코드 기본 문법을 공부하는 방법은 따로 있나용?
      이번 수업의 흐름은 알겠는데, 코드 작성하면서 어떤 상황에서 {}, [], ., =, '', "" 를 사용해야 하는지 상황에 맞는 코드 작성은 잘 모르겠습니다ㅠㅠ.
    • 당당
      2022.09.22
    • 정스
      쪼까 어렵네요 완료
    • seophy
      0724중단
    • toonfac
      220704 오전 1시 02분 완료
    • choi
      22.04.13 완료
    • LLLEE
      22.04.04 완료했습니다.
      잘 이해가 안돼서 2번 돌리고 코드 따라 치니까 이해가 되네요.
    • 원채연
      감사합니다! 잘 배우고 갑니다.
      영상이나 소스코드에선 Nav 함수 리턴 값에 () 괄호 없이도 잘 구동되는 것 같은데
      저는 안 되더라고요. 그래서 라이브 데모 판 코드보고 차이를 발견해, 괄호를 넣어봤더니 잘 되네요.

      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 href={'/read/'+t.id}>{t.title}</a></li>)
      }
      return(
      <nav>
      <ol>{lis}</ol>
      </nav>
      );
      }
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기