jwlee

Component LifeCycle Method render() 함수이 메서드는 컴포넌트 모양새를 정의한다. 그렇기에 컴포넌트에서 가장 중요한 메서드라고 할 수 있다. 라이프사이클 메서드 중 유일한 필수 메서드이기도 하다. 이 메서드 안에서 this.prop와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 요소는 태그가 될 수도 있기 따로 선언한 컴포넌트가 될 수도 있다. 아무것도 보여주고 싶지 않다면 nul값이나 false값을 반환하도록 한다. 그리고 이 메서드 안에서는 절대로 state를 변형해서는 안 되며, 웹 브라우저를 접근해서도 안 된다. DOM정보를 가져오거나 변화를 줄 때는 compoenentDidMount에서 처리해야 한다. constructor 메서드이것은 컴포넌트의 ..

컴포넌트의 라이플사이클 메서드MountDOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. 이때 호출되는 메서드는 다음과 같다. constructor컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자이다. getDerivedStateFromPropsprops에 있는 값을 state에 동기화하는 메서드이다. render준비한 UI를 렌더링하는 메서드이다. componentDidMount컴포넌트가 웹 브라우저상에 나타난 후 호출되는 메서드이다. Update컴포넌트를 업데이트 할 때는 다음 네 가지 경우다. 1. props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리렌더링 될 때 4. this.forceUpdate로 강제로 렌더링을 트리거할 때 이렇게 컴포넌트를 업데이트 할 때..

Block Updateblock update란 컴포넌트가 렌더링을 안 하는 것을 의미한다. 보통 Link를 통해 location을 바꿀 때마다 인식하길 원할 때 새롭게 바뀐 장소를 인지 못하면서 발생하는 버그다. 해결 방법은 컴포넌트에게 location을 알려주면 된다. 콘솔을 봐 보자.router안에 location의 pathname을 prop할 수 있게 지정해 주면 된다. const mapStateToProps = (state, ownProps)=>{ const { user, router: {location}} = state; return{ isLoggedIn: user.isLoggedIn, pathname:location.pathname, };};

Middle Ware redux thunk에 대해 설명하기 전에 미들웨어에 대해 설명해 보겠다. 미들웨어는 액션이 디스패치 되어서 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 설정한다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하면 된다. 리듀서가 액션을 처리하기 전에, 미들웨어가 할 수 있는 작업들은 여러가지가 있는데 단순히 전달받은 액션을 콘솔에 기록할 수도 있고 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있다. what's a redux-thunk리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법으로는 redux-thunk라는 미들웨어를 사용하는 것이다. 이를 사용하여 비동기 작업을 관리하는 건..

Redux리덕스의 3가지 규칙1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.하나의 애플리케이션에서는 단 한 개의 스토어를 만들어 사용한다. 여러개의 스토어를 사용하는 것이 가능은 하지만 권장하지 않는다. 특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수도 있다. 하지만 이럴 경우 개발 도구를 활용하지 못하게 된다. 2. 상태는 읽기 전용이다.리액트에서 state를 업데이트 할 때, setState를 사용하고, 배열을 업데이트 해야 할 대는 배열 자체에 push를 직접 하지 않고, concat같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다. 엄청 깊은 구조로 되어있는 객..

Redux리덕스 소개리덕스는 상태관리 라이브러리이다. 리액트에 종속되어 있지 않고, 리덕스를 사용하면 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 추가적으로, 리덕스의 미들웨어라는 기능을 통해 비동기 작업, 로깅 등의 확장적인 작업들을 더 쉽게 할 수 있게 해 준다. 개념 정리Action상태에 어떠한 변화가 필요하게 될 때 우리는 액션이란 것을 발생시킨다. 이는, 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이뤄져 있다.{ type: "TOGGLE_VALUE" }액션 객체는 type필드를 필수적으로 가지고 있어야 하고 그..

장고와 리액트를 연결하기 위한 순서는 다음과 같다. 1. 장고를 위한 proxy를 만들기2. djnago-cors-headers 설치3. corsheaders를 INSTALLED_APPS에 추가4. corsheaders.middleware.CorsMiddleware를 django.middleware.common.CommonMiddleware전에 추가5. CORS_ORIGIN_ALLOW_ALL = True를 base.py 맨 아래 추가6. 장고가 bundle을 static file로 로딩하게 해야 한다.7. 디렉토리 전체를 위한 views.py추가 proxyyarn build를 할 때마다 build디렉토러에 개발한 내용들이 압축될 것이다. 이걸 장고가 읽을 수 있도록 해야 한다. 리액트가 실행되고 있는 포..

CRA(Create React App)CRA는 일종의 Configuration base로 처음부터 웹팩을 작업 하기에는 시간이 많이 걸리기 때문에 사용한다. CRA를 사용하기 위해서 글로벌로 추가해준다. yarn global add create-react-app그 다음 아래의 명령어로 앱을 만들어 주면 된다.create-react-app MyApp자신이 만든 앱으로 이동해서 yarn start를 해 주면 CRA을 성공적으로 생성한 것이다.yarn start module먼저 scss를 CRA에서 사용하기 위해서는 아래 명령을 터미널에서 실행시켜 준다.yarn add node-sass sass-loader 이제 module에 대해서 설명해 보겠다. scss에서 module을 사용하면 클래스명을 랜덤으로 지정..