Youngble_개발스토리

부모컴포넌트에서 함수를 만들고 함수를 props로 넘겨준다. 함수의 pointer를 onSaveExpenseData변수 prop으로 넘겨주었기때문에 자식컴포넌트에서 해당 함수를 쓰게되면 부모에 있는 함수로 돌아가서 실행하게된다. 주의사항: 1. 무한루프 넘겨주는 데이터가 부모에서 바뀌고 그것이 다시 자식컴포넌트로 물려주는 state값이라면 또 업데이트 될경우 무한루프 빠지게 되므로 이를 숙지할것. 2. 코드수정, 유지보수 힘듬 부모-> 자식 또는 자식-> 부모로 이어지는 하위/상위 컴포넌트가 많은 구조라면 코드수정, 유지보수 힘들수있다는거 숙지할것, 특히 다른사람과 협업이라면 더더욱 3. 불필요한 렌더링,state 처리 한번의 변경으로 수많은 상태 변경 과정이 이뤄져야 하며, 이 과정에서 불필요한 렌더링..

리액트 상태변화 기존 변수의 값이 onClick 이건 다른 이벤트 발생해서 내용이 바뀌더래도 화면상에서는 변경된 변수로 보이지 않는다 이유는 초기 렌더링 이후에 data가 바뀌었다는걸 리액트가 평가하여 재 평가하거나 렌더링 하지 않기 때문이다. 예를들어 let changingIt = 'a'; const onChangeSpelling => ()=>{ changingIt = 'b' } 이렇게 변수가 있고 어떤 특정 리스너(클릭)을 하여 'a' 문자에서 'b' 라는 문자로 만든다고 했을때 return 부분에 changingIt의 데이터를 화면에 출력되는거라고 할때, 리액트는 그런걸 신경쓰지않는다고한다. 당연히 코드는 리스너(클릭이벤트)가 발생했으니 해당함수는 실행하지만 화면변화를 위한 리액트는 이것을 무시하기..

리액트의 hook을 알아보기전에 먼저 기본적으로 Side Effect이 무엇인지 알아야한다. 01 Side Effect란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다. 예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(~~답답함)~~을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. → 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다. → Hook은 이 side effect 를 수행하는역할을 한다. ..

React의 element들 안에 Key 값을 가지고 있어야한다. 없으면 warning 이 뜨는데 각각의 자식요소들은 unique한(독자적인) key prop을 가지고 있어야한다고한다.

리덕스의 store 를 사용하기위해서 index.js 에 {Provider} 를 import 하는걸 볼수있는데 이것이 무엇인지 나오지 않았다. 공식문서를 통해 무엇인지 보면 다음과같다 Passing the Store with Provider Our components can now read state from the store, and dispatch actions to the store. However, we're still missing something. Where and how are the React-Redux hooks finding the right Redux store? A hook is a JS function, so it can't automatically import a store f..