■ Redux란? - state같은 경우 각 컴포넌트의 상태를 관리했다면 Redux는 전체적인 애플리케이션의 상태를 관리하는 패키지로 모든 컴포넌트에서 공유하는 앱 상태(state)를 다룰 수 있다. ■ Redux의 구성요소 ● 저장소(store) - 앱의 상태를 저장하는 저장소 - state는 애플리케이션당 한개만 존재하며 configureStore()에 의해 생성되면서 reducer와 결합한다. - useSelector(state)훅을 통해 저장소의 상태(state)를 가져올 수 있다. ● 액션(action) - 개발자가 만드는 객체로 useDispatch훅을 통해 저장소로 action을 전달한다. ● 디듀서(reducer) - 현재 앱상태(oldState)와 action객체 2가지를 매개변수로 입력..
■ HOC(High-Order-Component) - 컴포넌트를 인자로 받거나 반환하는 함수이다. - Hoc를 이용하면 여러 컴포넌트에서 동일하게 적용되어야 하는 공통 기능을 코드 중복없이 사용할 수 있다. ex) 로깅, id체크 ● HOC 예시코드 import withLogging from "./withLogging"; function Hoc(){ return( hoc..hoc.. ) } export default withLogging(Hoc, 'Hoc'); ● WithLogging.js 코드 const withLogging = (WrappedComponent, logging) => { return function WithLoggingComponent(props){ // 필요한 공통로직 처리부분 con..
■ 콜백(Callback)함수란? - 자바스크립트의 함수 중 비동기적으로 작동하는 코드는 실행된 작업이 끝나지 않았더라도 다음 작업이 시작될 수 있는데 이때 특정 코드를 내가 원하는 시점에 실행될 수 있도록 컨트롤해줘야 할 때 콜백함수를 사용한다. ● 콜백함수 예시코드 import { useEffect } from "react"; function Callback(){ useEffect(() => { logPrint(1, function(return1){ console.log("return1 : " + return1); logPrint(return1, (return2) => { console.log("return2 : " + return2); }) }) function logPrint(param, call..
■ Fetch란? - 자바스크립트 내장함수로 비동기통신을 구현할 때 사용한다. ※ 비동기통신 : 먼저 시작한 작업의 완료여부와 상관없이 다음 작업을 실행하는 것 ■ Fetch get방식 - get방식 요청시 별도의 추가메서드는 사용하지 않고 url뒤에 내가 전달하고자 하는 값을 붙여서 전송한다. ● Fetch를 이용해 url호출 후 데이터 가져오기 function FetchGet(){ useEffect(() => { const fetchData = async () => { const response = await fetch("http://date.jsontest.com?a=1"); const body = await response.json(); // json? response중 body에 있는 부분을 J..
■ Ref란? - reference의 약자(참조변수)이며 자바스크립트에서 html요소를 선택할 때 document.getElementById('아이디값')와 같은 선택함수와 같이 요소를 가져온 후 조작하였다. - React에서는 위 방식에 더해서 Ref를 통해 html요소를 조작할 수 있도록 지원한다. ■ 사용방법 1. import import { useRef } from "react"; 2. Ref변수 생성 const inputRef = useRef(null); 3. html요소에 ref속성 추가하기 {/* input요소에 ref속성을 추가하고 inputRef변수에 할당시, 현재 input요소에 대한 정보를 inputRef를 통해 참조할 수 있다. */} input요소를 ref를 통해 선택할 수 있다...
■ 라우팅이란? - 웹 서버에서 명시된 자원을 찾는 과정이다. - Servlet Framework에서는 클라이언트가 호출한 url에 해당하는 웹페이지를 서버에 제공해 주었다. - 리액트에서는 url이동이 서버에서 forwarding 해주거나 redirect해주는 것이 아니라 location객체, history객체를 이용해서 클라이언트 측에서 페이지 이동이 이루어지는 것처럼 보이게 한다. ● react-router-dom * 라우터를 지원하는 패키지 다운로드 npm install react-router-dom - react-router-dom은 BrowserRouter, Routes, Link기능을 제공한다. BrowserRouter : Route를 사용하기 위해서 감싸줘야 하는 태그 Route : 호출되..
