React

state

수업소개

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

 

 

 

강의 1

 

 

 

강의 2

state의 사용

코드 변경 사항

 

 

 

강의 3

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

 코드 변경 사항

댓글

댓글 본문
  1. 20.09.02 강의3 어렵네요 이해는 못했지만 따라하긴 했어요ㅎㅎ
  2. HongKyu Lim
    state는 함수 컨포넌트에서는 사용 하지못하는거죠?
  3. 규묭이
    저에게 있어 '5대 성인 = 4대성인 + 이고잉샘' 입니다... ㅠㅠ
  4. 이경훈
    감사합니다. ^^ 진짜 설명 잘하시네요.
  5. 껍질파괴
    수강완료했습니다. 감사합니다.
  6. supernet
    완료했읍니다. 감사합니다.
  7. 호눅스
    강의 3번 어렵네요 ㅎㅎ. 난이도 급 상승한 느낌입니다.
    그래도 커밋 링크 주셔서 그거 보고 공부할 있어서 정말 좋네요. 이번 강의도 꿀잼이었습니다!
  8. 할수이따
    2020.03.05
  9. 한케빈
    감사합니다
  10. 김태완
    15.3 강의 실습하고 있는 도중, <li key={data[i].id}> 이와 같이 key 값을 주었는데도, 오류가 발생합니다. CSS값이 로컬호스트페이지에 나와야하는데, HTML 값이 자꾸 나오네요.. TOC 소스코드는 해당 강의와 동일합니다.

    Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

    무엇이 문제일까요..

    + 해결했습니다. App.js에서 id값을 잘 못 주었네요..
  11. lygon
    2019-10-15 완료
  12. 김수현
    다른 페이지로 이동하게 하려면 정확한 주소를 입력해야 겠지요.
    그렇지만 여기서는 그냥 아무거나 적었다고 생각하시면 됩니다.

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

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

      자세한 내용 : https://docs.google.com......ing
      대화보기
      • 천년여왕
        javascript, jquery 만 보다.... react 를 보니..., 신세계네요....
        수업내용 이해하기 쉽고 넘 좋네요...
        감사합니다.
      • Giri
        감사합니다.
      • 궈궈신
        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 자세히 보기