수업소개
React는 컴포넌트를 외부에서 조작할 때는 props를 내부적으로 상태를 관리할 때는 state를 사용합니다. 여기서는 state에 대해서 소개하고, state를 다루는 방법을 소개합니다.
강의 1
강의 2
state의 사용
강의 3
복수의 앨리먼트를 생성할 때는 key라는 특수한 props를 사용해야 합니다. 여기서는 key의 사용법을 소개합니다.
댓글
-
23/8/14 -
230627
-
good
-
좋은 강의 잘봤습니다.
-
20220221
-
완료
-
ok
-
ok
-
2021.08.05 State 완료:)
-
2021.06.02 State - OK
-
완전 이해를 한 건아닌데, 왜 props랑 state를 구분지어 쓰는 지 조..금 이해한 거 같아요.. 정말 감사드려요
props는 읽기전용이고, 값이 바뀌어질 수 없다.
state는 값이 바뀌어질 수 있고, 다만 컴포넌트 내부에서만 사용가능하다.
좋은 컴포넌트란 함수가 인자를 받을때 내부의 로직을 사용자가 이해할 필요없이 인자값만 함수사용목적에 맞게 잘 넣어주면 되는 것을 알면되는 것처럼 props을 잘 넣어주기만 하면 사용하기 편리하도록 만든 컴포넌트가 좋은 컴포넌트라고 봐도 되는 것이다,..(?) // 우선 이렇게 이해했는데 괜찮을지..
이상적인(?) 부모컴포넌트와 자식컴포넌트의 state와 props의 관계는,,,
부모컴포넌트에서 state의 값을 변경하며 사용하고 그 state값을 자식컴포넌트의 props의 값으로 넣어줘서 자식컴포넌트가 state를 props으로 넣어준 값을 사용할 수있도록해서 그 값을 사용하는 것이 이상적인 관계..
혹시 이해가 부족하거나, 이해를 위해 필요한 것이 있으면 도움주시면 정말 감사하겠습니다....! -
21.4.2 완료.
그러나 3강 이해 부족으로 다시 듣기
21.4.5 완료 -
21.4.2 완료
감사합니다. -
와..정말 재미있네요
-
2021 1 20
-
아무것도 안 고쳤는데 다시 새로고침하니 되네요 ㅋㅋ -
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) -
감사합니다.
-
냠냠냠냠냠냠냠냠! -
감사합니다~
-
따라하기도 완료
-
저는 함수의 변수로 저장했습니다
-
20.09.02 강의3 어렵네요 이해는 못했지만 따라하긴 했어요ㅎㅎ
-
state는 함수 컨포넌트에서는 사용 하지못하는거죠? -
저에게 있어 '5대 성인 = 4대성인 + 이고잉샘' 입니다... ㅠㅠ
-
감사합니다. ^^ 진짜 설명 잘하시네요. -
수강완료했습니다. 감사합니다.
-
완료했읍니다. 감사합니다.
-
강의 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값을 잘 못 주었네요.. -
2019-10-15 완료
-
다른 페이지로 이동하게 하려면 정확한 주소를 입력해야 겠지요.
그렇지만 여기서는 그냥 아무거나 적었다고 생각하시면 됩니다.
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라고 부르나요?
다른 명칭이 있나요? -
나중에 라우팅하기 편하라고 덧붙인 문자열인 것 같습니다.
-
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는 어디서 나온걸까요?
