내용을 좀 더 보태자면, 배열이랑 다르게 객체는 데이터 메모리의 순서에 상관 없이 가져올 수 있습니다. (앙마님 구조분해할당 영상 후반부에 나와요.) 그래서 로 어트리뷰트 값을 설정하면 Hello.js의 props객체로 age라는 프로퍼티로 값이 전달 되구요. 이 값을 다르게 풀어보면 let {age} = props가 되니까 {age}로 쓸 수 있는거죠.
개발 모드에서만 발생하는 현상이에요. 실제 프로덕션 모드에서는 괜찮으니 걱정 안하셔도 됩니다. 아래 글을 참고 하세요! all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%91%90%EB%B2%88-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%98%EB%8A%94-%EC%9D%B4%EC%8A%88%EC%97%90-%EB%8C%80%ED%95%98%EC%97%ACFeatStrictMode
age = props.age 를 {age} = props 로 쓸 수 있습니다. function(props){ console.log(props.age); console.log(props.name); } function({age, name}){ console.log(age); console.log(name); } 가 같아요. props 개수가 많지 않으면 두번째 방식으로 자주 사용합니다. ruclips.net/video/lV7ulA7R5Nk/видео.html 이 영상을 참고하시면 도움 되실거에요.
Mike는 10세... 세는 뺄게요...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
덕분에 한참 웃었어염
유튜브 기능을 적절히 활용한 리액트강좌 중 최고에 상응하는 영상입니다. 끝까지 보고 코멘트 남기려고 했는데 일단 적고 진행하겠습니다.
크.. 극찬 감사합니다.
국비지원학원에서 리엑트 수강중인데 너무 어렵게만 느껴졌던 props 부분을 단 4분만에 초핵심 부분만 집어주시니 바로 이해가 되네요! 핵심만 콕콕집어서 알려주시는 강의방식 너무 좋아요 감사합니다!
와.. 정말 쉽고 직관적으로 설명해주셔서 이해가 쏙 됩니다. 영상 올려주셔서 진심으로 감사드립니다.
정말 정말 감사합니다 ㅠㅠ 복 받으실 거예요
리액트..너무 신기하네요 쉽게 알려주셔서 감사합니다!
솔직히 리액트 어려워서 배우기 싫어 뿌아앙 이었는데 와...일단 듣기만 먼저 해보는데 너무 좋아요....이래서 리액트를 쓰는구나...
유료강의 다른거 결제했지만 듣다가 튕겨나오고 그랬는데 하 ㅠ.ㅠ.... 이 분을 좀 더 일찍 알 것을...
변수명을 다name으로 지으셔서 헷갈립니다..
컴포넌트 안에서는 state 이지만, 한테는 props 입니다 가 핵심이군요
@@bic8168 Hello 컴포넌트 에서 name이 state로 정의되어 사용되지만, 으로 다른 컴포넌트를 불어오면서 전달하는 name은 props란 의미 아닐까요?
구조분해할당 다시 봤는데도 이해력이 부족해 질문해도 될까요? let {age} = props 를 해주지 않았는데도 어떻게 {age}로 값을 받아올수 있던걸까요???
function(name) 이면 함수 내부에서 let name 하지 않고 name 변수 쓰는거랑 같아요.
이미 저 괄호안에서 props.age 를 age 로 쓰겠다는 의미가 들어가 있는거죠.
@@codingangma 감사합니다 🐣
내용을 좀 더 보태자면, 배열이랑 다르게 객체는 데이터 메모리의 순서에 상관 없이 가져올 수 있습니다. (앙마님 구조분해할당 영상 후반부에 나와요.)
그래서 로 어트리뷰트 값을 설정하면 Hello.js의 props객체로 age라는 프로퍼티로 값이 전달 되구요. 이 값을 다르게 풀어보면 let {age} = props가 되니까 {age}로 쓸 수 있는거죠.
와우~! 최고에요
콘솔을 찍힐때마다 콘솔값이 두번씩 찍혀요.. 왜 그럴까요?? 두번씩 렌더링 되는 걸까요? 이런적이 없었는데 최근 리액트 업데이트 문제일까요?
개발 모드에서만 발생하는 현상이에요. 실제 프로덕션 모드에서는 괜찮으니 걱정 안하셔도 됩니다.
아래 글을 참고 하세요!
all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%91%90%EB%B2%88-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%98%EB%8A%94-%EC%9D%B4%EC%8A%88%EC%97%90-%EB%8C%80%ED%95%98%EC%97%ACFeatStrictMode
@@codingangma 아이구!! 그런것이 였군요 🙀 ㅎㅎㅎ 답변 감사드립니당!!
{name}, {age} {msg} 이렇게 쓰는게 구조분해할당 을 보고 와도 좀 헷갈리네요..
검색해서 해결햇습니다! 그래도 약간 헷갈리네요
감사합니다!!!
함수인자로 어떤건 props로 받고 어떤건 {age}로 받는데 중괄호의 차이점이나 기준이 뭔지 이해가 도통 안됩니다 ㅠㅠ
age = props.age 를
{age} = props 로 쓸 수 있습니다.
function(props){
console.log(props.age);
console.log(props.name);
}
function({age, name}){
console.log(age);
console.log(name);
}
가 같아요. props 개수가 많지 않으면 두번째 방식으로 자주 사용합니다.
ruclips.net/video/lV7ulA7R5Nk/видео.html 이 영상을 참고하시면 도움 되실거에요.
@@codingangma 감사합니다!
궁금했던건데 감사합니다
세뺄께요 쏘 큐티....
감사합니당
안녕하세요. UserName.js 이 부분 syntax 에러가 나오는데요. 어떻게 수정 해야 할까요?
3 |
4 | export default function UserName({name}){
> 5 | return Hello ,{name}
| ^
}
혹시 앞에 를 대문자로 작성하셨나요..?
앗 소문자 p를 대문자 P로 적어서 에러가 생긴거였네요.. 빠른 답변 감사합니다. #10강 react route dom 설명 들으면서 코딩 중입니다. ^^
state가 변경되도 재렌더링 되듯이
props가 변경되도 재렌더링이 되는것이죠?!
맞습니다!
Thank you
react는 node.js없이 안되나요?
없어도 됩니다.
ruclips.net/video/9vf6zho57Gw/видео.html
dev.to/luispa/lets-try-react-without-nodejs-3a7
@@codingangma 감사합니다! 방금 본 게시물같은데..그리고 어플에서 php 거의 안쓰여지나요? 역시 node인가요?
@@一arh1 대세라고 반드시 따라갈 필요는 없구요 ㅎㅎ 회사 사정도 있을것이고, 상황에 맞게 선택하시면 됩니다.
아직도 php, jQuery 쓰는 곳이 많아요. 모든 서비스가 신규 프로젝트는 아니니까요.
@@codingangma 그래도 점점 리엑트랑 노드로 바뀌어가는 추세죠? 제이쿼리나 php가 안쓰여지는 환경에서도 일단 프로그래머로서 배워두고싶어서..
props 이해안갔는데 감사합니다 ㅎㅎ