React

화면에 3이 쓰여져 있다.뒤에서 3이 쓰여진 변수가 2로 바뀐다.바뀐 부분을 감지하고 해당 컴포넌트를 다시 렌더링한다.이제 화면에 2가 쓰여져 있다.useState로 변수와 set함수를 생성값을 set함수를 사용해서 바꿈바뀐거 인지하고 react에서 다시 렌더링함객체는

변수임.크게 두 가지로 쓰임.intput이라는 놈은 참조해서, 지금 위치인 함수형 컴포넌트에서 얘에 대한 조작을 할 수 있음.그냥 변수 만드는 용으로 사용됨Lifecycle을 이해하고 있어야 함.기본적으로 react 컴포넌트들은 아마 리렌더링 되는 경우가 많음let으로

App.jsUserList.jsCreateUser.jsApp.js가 실행됨.순서대로 실행되며 값과 함수들이 선언됨return 부분이 렌더링되고, 컴포넌트들에 콜백 함수가 등록됨구조상 중요한 게, 여기서 UserList이랑 CreateUser 컴포넌트를 렌더링하는데, 얘

컴포넌트의 생명주기에 따른 side effect를 관리하는데 사용해당 컴포넌트가 DOM에 처음 출현했을 때(마운트 되었을 때), DOM에서 사라졌을 때(언마운트 되었을 때), 컴포넌트의 props가 변경되었을 때(마운트, 언마운트되지 않지만 감지해야하는 경우가 있을 수

렌더링 된 컴포넌트 안의 모든 함수들은 그 안의 state, props를 잡아 둔다.렌더링 된 컴포넌트는 하나의 객체가 된 느낌.setState 호출하면, state가 바뀐 새로 렌더링 된 컴포넌트가 탄생함.따라서 렌더링 된 컴포넌트의 useEffect 내부에서 사용하

1. useState 문제점 여러 상태 변수 중 하나의 상태 변수가 useState로 변경된 경우, 그 함수형 컴포넌트 전체 본문이 다시 실행됨 실제 DOM 업데이트는 변경된 부분에서만 발생하긴 해서, 성능상의 큰 문제가 발생하지는 않음 하지만 무조건적으로 모든 것을

useState는 컴포넌트 안에서 상태를 관리함useReducer는 컴포넌트 상태 업데이트 로직을 컴포넌트와 분리시킬 수 있음즉, 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있음reducer는 현재 상태와 액션 객체를 받아서, 새로운 상태를 반환하는 함수.redu

특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 리액트에서 흔함3~4개 이상의 컴포넌트를 거쳐서 전달해야 한다면 매우 번거로움Context API와 dispatch를 사용하면 이러한 복잡한 구조를 해결할 수 있음프로젝트에서 전역적으로 사용할 수

1. Context 객체의 형태로 전역 데이터를 담는 그릇 출처 https://velog.io/@secho/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EC%A0%84%EC%97%AD%EC%83%81%ED%83

React Component는 HTML Markup을 사용할 수 있는 JavaScript 함수임.Component 내부에서 다른 Components를 렌더링할 수 있지만, 정의는 하지 말 것.JSX 규칙: return 시에 single parent tag로 wrap되어

Event Handler 여기서 결국 button onClick에 PlayButton의 handlePlayClick 함수가 콜백 함수로 등록되는데, 여기서 제대로 된 movieName을 뱉을 수 있는 이유는, handlePlayClick 함수가 정의된 Closure

부모 Component에 state 정의state를 prop에 넣어 자식 component에 전달자식들은 해당 state를 공유함이런 경우, setState 함수를 내리지 않는 이상 자식에게 state를 바꿀 권한이 없어짐.prop으로 setState 함수를 보내야 자

배경여러 event handler에 많은 state 업데이트가 분산된 경우의 복잡함을 줄이기 위해 등장. state 업데이트 로직을 component 밖의, reducer라는 하나의 function으로 분리함.setState를 dispatch action으로 변경

Reducer: Component의 state update logic을 통합함.Context: information을 아래 componenet로 전달함.reducer만 사용하면, 해당 state를 사용하기 위해, 또 변경하기 위해서 state와 event handler