nika-blog

이번 포스팅에서는 리액트 라이프 사이클에 대해서 공부하고, 함수형 프로그래밍과 클래스형 프로그래밍에서 각각 어떻게 사용하는지 익혀보겠습니다. 리액트 라이프사이클 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클의 분류 생성될 때 = 마운트 업데이트할 때 = 업데이트 1. props 가 바뀔 때 2. state 가 바뀔 때 3. 부모 컴포넌트가 리랜더링 될 때 4. this.forceUpdate로 강제로 랜더링을 트리거 할 때 제거할 때 = 언마운트 함수형 라이프 사이클 구현 useEffect ..

개념 React는 UI를 구축하기 위한 JavaScript 프론트엔드 라이브러리. 주로 SPA 만들 때 사용 장점 virtual DOM을 사용해서 어플리케이션의 성능을 향상 시킵니다. 서버, 클라이언트 사이드 렌더링 지원이 가능합니다. 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽습니다. 다른 프레임워크와 혼용도 가능합니다. 컴포넌트란? 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발하는 방법입니다. 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다. **컴포넌트 이름은 항상 대문자로 시작하도록 한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이..

안녕하세요. React Router를 이용하여 페이지를 개발할 때 URL을 이용하여 할 수 있는 작업은 매우 다양한데요.다음과 같은 작업들을 할 수 있습니다. url Parameter로 호출할 api 의 id 값 받아오기 url parameter로 특정 컴포넌트를 보여주기location state 으로 현재 페이지에 상태값 전달 및 받아오기history 객체를 이용하여 새로운 페이지로 이동하기 등등오늘은 React Router 에서 제공하는 location 객체에 대해서 알아볼 것입니다!  Location 이란?React Router 라이브러리에서 제공하는 location 객체는 현재의 URL 정보를 나타냅니다. (참고로 web api 의 location 과는 다른 객체입니다. history 객체도요!)..

안녕하세요. 리액트를 이용해 개발을 하면 상태관리에 신경을 써줘야합니다. 상태가 변하면 리액트 컴포넌트가 리렌더링되기 때문인데요. 이는 리덕스 훅을 사용한 컴포넌트 개발에서도 마찬가지입니다. 오늘은 상태를 조회하고 리렌더링을 트리거하는 useSelector 훅의 동작원리를 알아보겠습니다. useSelector 훅이란?const result: any = useSelector(selector: Function, equalityFn?: Function)리덕스 스토어에서 상태를 조회하는 react-redux 라이브러리의 hook 입니다. 코드를 보시면 두개의 인수를 받고 있는데요.  1. selector첫번째는 selector 함수로, 스토어에서 어떤 값을 조회할 지 결정하는 함수입니다. selector 함수는..

안녕하세요. 오늘은 리덕스 미들웨어(redux middleware)를 이용하여 비동기 작업을 처리하는 법에 대해 알아보도록 하겠습니다.먼저, 리덕스 미들웨어란?리덕스 스토어의 기능을 확장하는 방법 중 하나입니다. 미들웨어를 사용하면 dispatch 함수를 커스터마이징하여1. 액션(action)이 디스패치(dispatch) 된 이후,2. 액션이 리듀서(reducer)에 도달하기 전에추가적인 작업을 수행할 수 있습니다.미들웨어는 언제 사용될까요?간단하게만 설명드리자면,,, side effect를 처리하는데 필요합니다!어플리케이션 개발시, 서버로부터 데이터를 받기위해 http 요청을 보내거나, 콘솔에 로깅을 하는 등의 필요한 경우가 있는데요. 이렇게 외부상태를 변경하는 모든 작업을 side effect 라고 ..