분류 전체보기91 deps에 관하여,useEffect( ),useMemo(),useCallback(),useState( ), deps[ ]를 넣어주는 이유 ? 함수 안에서 사용(의존) 하는 state 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 된다는 것 만약에 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없다 props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어한다. dependency 영역에 포함된다면 (외부에서 선언/정의된 함수가 변경이 필요한 함수라면) 판단 후 넣어주자. [deps] 참조 값이 바뀐다면 ? 함수도 다시 재생성. 즉, 주소값이 바뀜 useState( ) 함수형 업데이트 setNumber(함수) 함수를 넣어줄 수 있다. = update 함수라고 부른다 위의 사진에서 (제거버튼) .. 2021. 7. 7. Context API https://parkjaeho.tistory.com/107 React Callback Function - (컴포넌트 통신) 부모컴포넌트에서 함수를 만들고 하위컴포넌트의 props 로 넣어준다 . 하위컴포넌트에서 부모컴포넌트의 함수를 호출한다. Contacts.jsx 에서 콜백함수(A)를 만들었다고 가정해보자, A함수는 제일 하 parkjaeho.tistory.com 컴포넌트끼리 통신을 할 경우 데이터를 전달->전달->전달 번거로움이 있다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. Context의 주된 사용 목적은 "중첩 된" 하위 컴포넌트(들)에 데이터를 공유하는 것. Context를 사용하면 컴포넌트 재사용이 어려우므로 .. 2021. 7. 4. React Callback Function - (컴포넌트 통신) 부모컴포넌트에서 함수를 만들고 하위컴포넌트의 props 로 넣어준다 . 하위컴포넌트에서 부모컴포넌트의 함수를 호출한다. Contacts.jsx 에서 콜백함수(A)를 만들었다고 가정해보자, A함수는 제일 하위 컴포넌트인 ContactCard.jsx 에서 호출이 되어야 한다고 가정해보자, props로 ContactList로 A함수 를 넣어줬다. 다시 ContactCard 의 props 로 A함수를 넣어줬다. A함수를 ContactCard 에서 호출하면 A함수는 ContactCard -> ContactList -> Contacts 의 순서를 거치게 된다. 하지만 컴포넌트의 양이 많아진다면 !? 🤔 props 와 callback 지옥에 빠지게 될 것이다.. 상태관리를 하면 해결이 된다 추후에 다뤄볼 예정이다. 2021. 7. 4. 기본자료형,객체 JavaScript의 원시(primitive) 타입인 number, boolean, string 등이 불변(immutable) 이고, 객체(ojbects) 타입인 array, object 등은 가변(mutable) 2021. 7. 3. React Event 버블링 하위의 이벤트가 상위로 전달되어 가는 것 부모/자식의 구조를 가지고 똑같은 이벤트를 가지고 있는 경우에만 발생하는 것. https://parkjaeho.tistory.com/87 이벤트 버블링, 이벤트 위임 버블링 하위의 이벤트가 상위로 전달되어 가는 것 부모/자식의 구조를 가지고 똑같은 이벤트를 가지고 있는 경우에만 발생하는 것. div에 클릭 이벤트 리스너를 등록해 놓고, button에도 클릭 이벤 parkjaeho.tistory.com 👉 event.currentTarget 👉 event.target 이 둘에는 차이가 있는데 event.currentTarget은 이벤트가 걸려있는 위치를 반환 event.target은 실제 이벤트가 발생하는 위치, 내가 클릭한 요소를 반환한다. 두 객체가 같을.. 2021. 7. 2. React state 불변객체란? 불변객체(immutable object)는 생성 후 그 상태를 바꿀 수 없는 객체를 말한다. React의 state는 불변객체이다. 즉, 객체에 변형을 가하면 안된다. 변형을 하는 대신 교체를 해주자. setState() 메서드를 사용하면 불변 객체를 유지하면서 상태를 업데이트 한다. 2021. 7. 2. React component component 란 ? -UI의 구성요소- 재사용 할 수 있겠다 싶은 컴포넌트는 분리 하면서 개발해야한다. => 앱의 규모가 커질 수록 개발에 드는 비용을 줄이고, 효율성을 높일 수 있기 때문. react component 는 대문자로 시작해야 한다. (Title Case문법) react 는 component 트리로 구성된다. props 란 ? 부모컴포넌트가 자식컴포넌트로 데이터를 전달 하는것. 컴포넌트에 전달된 속성(props) 객체는 읽기 전용(readonly) 이다. 다시 말해 전달 받은 속성 값을 수정하면 안된다. 컴포넌트 상태(state)를 활용해야 한다. 2021. 7. 1. 이전 1 2 3 4 5 6 7 ··· 13 다음
