문제 발생 udemy의 강의에 따라 진행을 하다보면 위와 같이 console 창에 key 경고 메세지가 출력되었다. Warning: Each child in a list should have a unique "key" prop. Check the render method of `Expenses`. See https://reactjs.org/link/warning-keys for more information. 새로운 값을 입력하여 동적으로 데이터를 추가할 수 있고 그 과정에서 아무런 문제가 없어보이는데 말이다. 이것은 React가 데이터의 목록을 렌더링하는 데 있어서 특별한 개념을 갖기 때문이다. 이 개념은 React가 발생할 수 있는 어떠한 성능 저하나 버그 없이 효과적으로 이러한 목록들을 업데이트하고..
component는 useState를 사용하여 state를 가질 수 있다고 앞서 설명했다. 그러한 component들의 상태를 의미하는 용어들이 존재하는데 그것을 알아보자 state less, presentational, dumb component 위의 여러 명칭들은 아무런 state를 가지지 않고 단지 데이터를 출력하기 존재하는 component을 의미한다. 이와 반대로 state를 가진 component를 아래의 명칭으로 읽컫는다. smart, stateful components 아무래도 React에서 component를 다루다보면 응용프로그램을 작고 재사용 가능한 조각으로 나누기 때문에 대부분의 조각들, component들은 실제로 무언가를 출력하는 데에 초점을 맞추고 있다. 때문에 project에..
앞서서 component에 대해 이야기할 때, props를 활용하여 component간의 데이터 송-수신을 다뤘었다. Component란 무엇일까? 앞서 React란 무엇인지 다뤘다. React란 무엇일까? React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접 coding-leaf.tistory.com 이번에는 그 반대로 밑에서 위로 Bottom-Up approach에 대해서 이야기해보고자 한다. Component communication in Bottom-Up approach(상향 접근 방식) 사실 이미 앞에서 다뤘던 부분이다. const [enteredTitle, setEnteredT..
Form HTML에서도 존재했던 폼이다. 마찬가지로 JSX코드를 통해 표준 JS로 변환된다. 이제는 버튼이 눌렸을 때, 이 폼(form)이 제출되도록 만들 것이다. 전반적인 코드 구성은 아래와 같다. const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredAmount] = useState(""); const [enteredDate, setEnteredDate] = useState(""); const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; const amountChangeHandler = (event) => { set..
지난 시간에 state에 대해서 다루면서 간단한 state를 다뤄봤다. 이번 시간에는 사용자가 입력하는 여러 값들에 대해서 state를 업데이트하는 방법에 대해서 다뤄볼까한다. How to update State? state를 사용한다고 선언할 때에 useState라는 hook을 사용한다는 것은 앞시간에 다뤘기에 알 것이다. 그렇다면 여러 개의 state는 어떻게 사용할까? 다음 예제들은 사용자로부터 title, amount, date를 받는 코드이다. 여러 예제들을 보고 어떤 코드가 나은지 직접 판단하기 바란다. 예제 1 더보기 const [enteredTitle, setEnteredTitle] = useState('') ; const [enteredAmount, setEnteredAmount] = u..
