React

state

수업소개

React는 컴포넌트를 외부에서 조작할 때는 props를 내부적으로 상태를 관리할 때는 state를 사용합니다. 여기서는 state에 대해서 소개하고, state를 다루는 방법을 소개합니다. 

 

 

 

강의 1

 

 

 

강의 2

state의 사용

코드 변경 사항

 

 

 

강의 3

복수의 앨리먼트를 생성할 때는 key라는 특수한 props를 사용해야 합니다. 여기서는 key의 사용법을 소개합니다. 

 코드 변경 사항

댓글

댓글 본문
작성자
비밀번호
  1. 2019-10-15 완료
  2. 김수현
    다른 페이지로 이동하게 하려면 정확한 주소를 입력해야 겠지요.
    그렇지만 여기서는 그냥 아무거나 적었다고 생각하시면 됩니다.

    e.preventDefault로 링크를 막아놓았기 때문입니다.
    대화보기
    • 김수현
      컴포넌트에 주입할 때 sub와 title을 사용한다면...
      sub와 title은 props가 됩니다.
      컴포넌트에서 사용하지 않으면 props가 아닙니다.

      [ props와 state의 이해 ]
      함수와 비슷하다고 생각하면 이해하기 쉽습니다.

      자세한 내용 : https://docs.google.com......ing
      대화보기
      • 천년여왕
        javascript, jquery 만 보다.... react 를 보니..., 신세계네요....
        수업내용 이해하기 쉽고 넘 좋네요...
        감사합니다.
      • 감사합니다.
      • 궈궈신
        this.state = { subject: { title: 'web' } }
        에서 subject와 title을 모두 props라고 부르나요?
        다른 명칭이 있나요?
      • beam1100@naver.com
        나중에 라우팅하기 편하라고 덧붙인 문자열인 것 같습니다.
        대화보기
        • 메신
          a 태그의 값을 임으로 '"/contect" + {data[i].id}로 바꾸시면 될 것 같습니다!
          대화보기
          • 리아포
            네. <a href={data[i].id+".html"}> 은 이해가 갑니다! 답변 감사합니다:)
            대화보기
            • 유태건
              while (i < data.length) {
              lists.push(<li key={data[i].id}><a href={data[i].id+".html"}>{data[i].title}</a></li>);
              i = i + 1;
              }

              이렇게 하면 전에 있던 코드처럼 1.html로 하이퍼링크가 됩니다.
            • 리아포
              흑흑.. 리액트 어렵네요.. TOC의 <li>태그를 반복문으로 만드는 과정에서 <a href="1.html"> 부분을 <a href={"/content/" + data[i].id}> 이렇게 바꾸셨는데요. 여기서 "/content/" 이것은 어디를 참조한 데이터인지 모르겠습니다ㅠㅠ App.js에서 state로 "contents" 값을 설정할때 id, title, desc까지만 코드를 줬는데 a태그의 content는 어디서 나온걸까요?
            graphittie 자세히 보기