React

state

수업소개

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

 

 

 

강의 1

 

 

 

강의 2

state의 사용

코드 변경 사항

 

 

 

강의 3

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

 코드 변경 사항

댓글

댓글 본문
  1. chanchan2
    저는 함수의 변수로 저장했습니다
    대화보기
    • 20.09.02 강의3 어렵네요 이해는 못했지만 따라하긴 했어요ㅎㅎ
    • HongKyu Lim
      state는 함수 컨포넌트에서는 사용 하지못하는거죠?
    • 규묭이
      저에게 있어 '5대 성인 = 4대성인 + 이고잉샘' 입니다... ㅠㅠ
    • 이경훈
      감사합니다. ^^ 진짜 설명 잘하시네요.
    • 껍질파괴
      수강완료했습니다. 감사합니다.
    • supernet
      완료했읍니다. 감사합니다.
    • 호눅스
      강의 3번 어렵네요 ㅎㅎ. 난이도 급 상승한 느낌입니다.
      그래도 커밋 링크 주셔서 그거 보고 공부할 있어서 정말 좋네요. 이번 강의도 꿀잼이었습니다!
    • 할수이따
      2020.03.05
    • 한케빈
      감사합니다
    • 김태완
      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값을 잘 못 주었네요..
    • lygon
      2019-10-15 완료
    • 김수현
      다른 페이지로 이동하게 하려면 정확한 주소를 입력해야 겠지요.
      그렇지만 여기서는 그냥 아무거나 적었다고 생각하시면 됩니다.

      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 자세히 보기