리액트

리액트로 지출 관리를 해주는 가계부 프로젝트를 진행중에 F12를 눌러 콘솔을 봤더니 Each child in a list should have a unique "key" prop.라는 Warning이 발생했다. 해당 Warning은 아래의 ExpenseList라는 컴포넌트에서 발생한 경고 메세지이다. ExpenseList 컴포넌트는 내가 산 물건의 정보를 입력하면 map에 담긴 내가 산 물건의 정보 + 입력한 정보를 ExpenseItem으로 보내서 출력하는 역할을 가지고있다. 아래의 코드를 보고 다시 살펴보자 const ExpensesList = (props) => { if(props.items.length === 0) { return Found no expenses.; } return ( {props...

App() 이 실행하게 되면 rendering 과정을 거치게 되면서 counter에 0을 넣고 rendering onClick() 함수가 연결 된 button을 클릭하게 되면 이전counter와 현재 counter의 참조 값을 비교해서 참조값이 다르면 rerendering. 2. State Function .state function을 사용하는 방법에는 2가지가 존재한다. 1. 값을 직접 전달하는 방법 setCounter(counter + 1) --> 2. 함수를 전달하는 방법 setCounter((current) => current + 1) --> 확실한 현재값을 전달해 줄 수 있음 공부한 내용을 바탕으로 이해한 것을 그대로 적은 공부일기장입니다! 틀리거나 잘못 이해한 부분이 있다면 지적해주시면 감사하..

//1 => 바꾸고싶은 데이터 counter 라는 데이터를 받아서 사용자들이 보게 될 컴포넌트인 return에 데이터를 담는다. //2 => 사용자들이 보게 될 부분에 변수를 연결해줌 //3 => counter값을 변경해 줄 함(setCounter)를 Button에 연결하여 호출함 //4 => counter의 새로운 값(counter + 1)을 가지고 해당 함수를 호출해 줌 React는 코드에서 업데이트되는 부분을 골라서 HTML에서 그 부분만 골라서 고쳐줌 > F12의 console에서 확인하게 되면 정확히 업데이트 되는 부분 > counter의 숫자만 1씩 올라감 //1 > React.useState(0); >> 컴포넌트에서 바뀌는 값을 관리하는 함수 1. Component란? - 리액트로 만들어진 ..