728x90 개발일지/React24 React map() 사용 시 unique "key" prop. 오류 컴포넌트를 map() 메서드로 돌릴때 아래와 같은 오류를 볼 수 있다. 일단 React에서 배열을 map으로 돌릴 때 배열의 원소가 key값을 갖고 있지 않아서 생기는 문제이다. 이 오류가 떠도 사용에는 문제가 없지만, 빨간 콘솔을 보기 싫으니 지워봐야겠다. // Home.jsx return 뭐할까용 navigate("/addPost")}>글쓰기 {todoList.map((item)=>( ))} 키값을 달라니 컴포넌트에 키를 추가해줘야겠다. // Home.jsx return 뭐할까용 navigate("/addPost")}>글쓰기 {todoList.map((item)=>( ))} 컴포넌트에 리스트의 각 id를 key값으로 줘봤다. index를 사용해도 된다고 하지만, 구글선생님은 그게 별로 좋은 방식이 아.. 2022. 8. 26. React에서 bootstrap/bulma css사용하기 리액트에 부트스트랩이나 벌마 패키지를 설치해 사용해볼 수 있다. 부트스트랩 yarn add bootstrap or npm i bootstrap 최상단(index/App.js) 파일에 import import 'bootstrap/dist/css/bootstrap.min.css'; 벌마 yarn add bulma or npm i --save react-bulma-components 동일하게 최상단 파일에 import import 'bulma/css/bulma.css' 컴포넌트 코드 function Test(){ return( Warning hero -- BULMA Warning subtitle buttons for bootstrap Primary Secondary Success Danger Warning I.. 2022. 8. 25. 리액트 렌더링 조건 리액트를 사용하는 이유 중 하나인 SPA(single page application)를 구현하기 위해서는 렌더링 조건을 알아야 원활하게 사용할 수 있는 것 같다. 쉽게 이용할 수 있는 조건은 아래와 같다. 1. state(상태) 변경이 있을 때 react 에서는 유동적인 데이터를 저장하기 위해 state를 사용한다. react를 시작하면서 접하게 되는 useState 등이 이러한 상태라고 볼 수 있다. useState를 통한 state 값을 변경하기 위해서는 setState()를 이용해야 react가 state의 변경을 감지할 수 있다. - redux 등 전역 상태관리 라이브러리 또한 state 업데이트에 사용되기 때문에, 전역 상태가 변경되어도 리렌더링이 이뤄진다. 2. props값이 변경될 때 통상적.. 2022. 8. 20. React 함수형 컴포넌트간 데이터 전송 https://hanbbistory.tistory.com/38 JS 유사배열과 배열의 차이 / 부모자식 컴포넌트의 관계 javaScript에서 유사배열과 배열의 차이 유사배열이란, Key 값이 숫자이고, length 값을 가지고 있는 객체로, 배열처럼 보이지만 배열이 아닌 object인 것을 말한다. 유사배열과 배열의 가장 큰 차이점 hanbbistory.tistory.com 부모 컴포넌트가 자식 컴포넌트에게 props를 통해 데이터를 전송해줄 수 있지만, 형제 컴포넌트끼리는 데이터 전송이 되지 않고, 자식 컴포넌트에서 부모 컴포넌트에게 데이터를 보내야 할 상황도 있다. 그렇다면 자식에서 부모, 또는 형제 컴포넌트간 데이터 전송은 어떻게 이뤄지는지 확인해보자 자식 => 부모 => 형제 useState를 .. 2022. 8. 17. 이전 1 ··· 3 4 5 6 다음 728x90
