리액트
-
props 제대로 이해하기프론트엔드 개발자가 될거야./react 2022. 7. 24. 10:47
부모 요소 Parent 자식 요소 Chlid import React from "react"; import Child from "./Child"; const Parent = () => { const sayHello = () => { alert("안뇽~") } // 이렇게 주는 것 처럼 똑같이 key:value형태로! // string이외의 형태는 자바스크립트 형태로 보내줄 수 있어 html에서는 안되니까 return ( ); }; export default Parent; Props 자식요소에게 전달하기 - 이렇게 주는 것 처럼 똑같이 key:value형태로 전달해야한다. - html에서는 string만 되고 나머지는 안되니까 string이외의 형태는 {}안에 넣어 자바스크립트 형태로 보내줄 수 있다. im..
-
map 함수 적용시 key props를 부여하는 이유프론트엔드 개발자가 될거야./react 2022. 7. 10. 13:55
map 함수를 적용할 때 왜 key props를 부여해야 할까? 나도 map으로 댓글 추가 기능을 구현할 때 key props를 부여했다. {props.comment.map((data, i) => { return ; })} 이렇게 말이다! 간단하게 말하면 그래야 리액트가 댓글들을 각각 구분할 수 있기 때문이다. 만약 map을 돌릴 때 key값을 넣어주지 않으면 이렇게 콘솔에 warning메세지가 뜬다. key에 대해 더 알아보기 key는 element list를 만들 때 포함해야하는 특수한 문자열 속성이다. arr.map()안에서 리스트의 각 항목에 key를 할당해야한다. - key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다. - key를 선택하는 가장 좋은 방법은 리스트의 ..
-
instagram 댓글 기능 구현프론트엔드 개발자가 될거야./react 2022. 7. 10. 11:28
이번주 내내 React를 했다. React가 무엇인지, 왜 사용해야하는지, CRA, Component, JSX, Sass, Router를 배우고 마지막으로 리액트의 가장 핵심인 State, Props를 배웠다. 이번에는 js로 구현했던 댓글 추가 기능을 React로 구현해보는 미션이었는데 정말 어려웠다.. 하지만 절대 포기하지 않지!! 어려웠지만 결국은 구현해냈다. 다시한번 정리해보며 내것으로 만들어보려고한다! 댓글 기능 추가하기 - 사용자가 댓글 입력 후 enter 를 누르거나 버튼 클릭 시 댓글이 추가되도록 구현해주세요. - 댓글 기능을 구현하기 위해서는 배열 데이터 타입 활용해야 합니다. - 댓글 하나를 컴포넌트화 시키고 필요한 데이터는 props로 넘긴 다음 부모의 state에 저장된 댓글 데이터..