React

state

수업소개

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

 

 

 

강의 1

 

 

 

강의 2

state의 사용

코드 변경 사항

 

 

 

강의 3

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

 코드 변경 사항

댓글

댓글 본문
  1. 생활둘기
    2021 1 20
  2. 김연진
    아무것도 안 고쳤는데 다시 새로고침하니 되네요 ㅋㅋ
    대화보기
    • 김연진
      VS code에서 컴파일은 됐는데 localhost에서 이런 에러가 뜨네요. 코드의 특정 라인에 문제가 있다고 뜨는게 아니라서 답답하네요. ㅜ
      Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
      SyntaxError: C:\Users\admin\Documents\Dev\react-app\src\App.js: Unexpected token, expected "," (12:6)
    • testrestbestwest
      감사합니다.
    • 김인환
      냠냠냠냠냠냠냠냠!
    • 소르
      감사합니다~
    • thebluerat
      따라하기도 완료
    • 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 자세히 보기