코드코코

특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 빈번히 발생하는 데, 만약 3~4개 이상의 컴포넌트를 거친다면 매우 번거로운 일이다ㅣ. 이를 해결하는 방법은 Context API와 dispatch를 함께 사용하는 것이다. Context API - 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있음. - 여기서 값은 상태, 함수, 외부 라이브러리 인스턴스, DOM 일 수 있음. //Context를 만들 때 const UserDispatch = React.createContext(null); /* createContext 의 파라미터에는 Context 의 기본값을 설정. 여기서 설정하는 값은 Context 를 쓸 때 값을 따로 지정하지 않을 경우 사용되는 기본 값 */..

리덕스 - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 - 리액트 뿐만아니라 앵귤러, 제이쿼리 등 다양한 프레임워크와 작동되게 설계됨. 키워드 1. 액션(Action) - 상태에 어떠한 변화가 필요하게 될 땐, 액션이란 것을 발생시킴. - 하나의 객체로 표현되며, type 필드를 필수적으로 가지고 있어야 함. - 어플리케이션의 store(스토어), 즉 저장소로 data를 보내는 방법. // action의 type을 정의 const Acion_type = 'Acion_type' //action { type:'Acion_type' } 2. 액션 생성함수(Action Creator) - 파라미터를 받아와서 액션 객체 형태로 만들어주는 함수 - 어떤 변화를 일으켜야 할 때 마다 액션 객체를 만들어야 하는데..

useState : 가변적인 상태를 지닐 수 있게 해줌 const [state,setState] = useState(0); - 함수가 호출되면 배열을 반환 - [ 상태 값, 상태를 설정하는 함수 ] useEffect : 리액트 컴포넌트가 리렌더링될 때 마다 특정 작업을 수행하도록 설정 할 수 있음 (마운트,언마운트, 업데이트시) 마운트 시에 하는 작업들 - props 로 받은 값을 컴포넌트의 로컬 상태로 설정 - 외부 API 요청(REST API 등) - 라이브러리 사용 (D3 , Video.js 등...) - setYnterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업예약 언마운트 시에 하는 작업들 - setIntervla, setTimeout 을 사용하여 등록한 작업들 clear 하..