React

state

수업소개

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

 

 

 

강의 1

 

 

 

강의 2

state의 사용

코드 변경 사항

 

 

 

강의 3

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

 코드 변경 사항

댓글

댓글 본문
  1. Poroporo
    2021.08.05 State 완료:)
  2. jeisyoon
    2021.06.02 State - OK
  3. 저는주홍채린
    완전 이해를 한 건아닌데, 왜 props랑 state를 구분지어 쓰는 지 조..금 이해한 거 같아요.. 정말 감사드려요

    props는 읽기전용이고, 값이 바뀌어질 수 없다.
    state는 값이 바뀌어질 수 있고, 다만 컴포넌트 내부에서만 사용가능하다.

    좋은 컴포넌트란 함수가 인자를 받을때 내부의 로직을 사용자가 이해할 필요없이 인자값만 함수사용목적에 맞게 잘 넣어주면 되는 것을 알면되는 것처럼 props을 잘 넣어주기만 하면 사용하기 편리하도록 만든 컴포넌트가 좋은 컴포넌트라고 봐도 되는 것이다,..(?) // 우선 이렇게 이해했는데 괜찮을지..

    이상적인(?) 부모컴포넌트와 자식컴포넌트의 state와 props의 관계는,,,
    부모컴포넌트에서 state의 값을 변경하며 사용하고 그 state값을 자식컴포넌트의 props의 값으로 넣어줘서 자식컴포넌트가 state를 props으로 넣어준 값을 사용할 수있도록해서 그 값을 사용하는 것이 이상적인 관계..

    혹시 이해가 부족하거나, 이해를 위해 필요한 것이 있으면 도움주시면 정말 감사하겠습니다....!
  4. 푸른벚꽃
    21.4.2 완료.
    그러나 3강 이해 부족으로 다시 듣기
    21.4.5 완료
  5. 유대영
    21.4.2 완료
    감사합니다.
  6. 혜경
    와..정말 재미있네요
  7. 생활둘기
    2021 1 20
  8. 김연진
    아무것도 안 고쳤는데 다시 새로고침하니 되네요 ㅋㅋ
    대화보기
    • 김연진
      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
      저는 함수의 변수로 저장했습니다
      대화보기
      • momo
        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 자세히 보기