React:리액트 컴포넌트 라이프사이클 이벤트 5장 | 시작하기에 앞서 React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 라이프사이클 이벤트는 분류하면 아래와 같다. 마운팅 이벤트 (리액트 엘리먼트를 DOM노드에 추가함)갱신 이벤트 (리액트 엘리먼트를 갱신할 때 발생한다)언마운팅 이벤트 (리액트 엘리먼트를 DOM에서 제거할때 발생한다)모든 리액트 컴포넌트는 라이프사이클 이벤트가 있다. | 이벤트 분류 분류에 따라 실행되는 횟수마운팅 : 리액트가 이벤트를 한번만 실행한다.갱신: 리액트가 이벤트를 여러 번 실행한다.언마운팅: 리액트가 이벤트를 한번만 실행한다. 라이프사이클이벤트와 함께 constructor() 도 포함시킨 컴포넌트의 전체 라이프사이클의 실행 순..
React: React 컴포넌트의 상태 객체 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다. | 시작하기에 앞서 리액트에서 컴포넌트의 상태는 매우매우 중요한 개념이다. 리액트의 장점이 되기도 하는 부분이 되기 때문이다. (책에서 한개 장 밖에읽을 수 있다면 이장을 읽기 바란다고 했을 정도이다.) React 컴포넌트의 상태 객체를 이용하면 가치있고 상호작용이 뛰어난 react 애플리케이션을 만들수 있다. 상태는 리액트 컴포넌트에 데이터를 저장하고, 데이터의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심개념이다. | 리액트 컴포넌트의 상태란? 리액트의 상태는 컴포넌트의 변경가능한 데이터 저장소다. 리액트팀에서는 컴포넌트는 상태머신입리다 라고 말하고 있다고도 한다. 속성과상태..
React:리액트 교과서 3장 (JSX) 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다.| 시작하기에 앞서 JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로, 특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다. 템플릿 엔진이나 HTML처럼 보일 수도 있지만 그렇지 않다. JSX는 리액트 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다. | JSX의 장점 개발자 경험개선 - 표현력이 뛰어나 코드를 읽기 쉽다. xml 과 문법이 유사해 중첩된 선언형 구조를 더 잘 나타낸다.팀의 생산성 향상 - 전문 개발자 외에도 개발 지식의 있는 팀원이있다면 직접 코드 수정이 가능하다. jsx는 htm..
React:리액트 교과서 2장 (리액트 첫걸음) 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다. | 시작하기에 앞서 엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고도 한다. 이러한 엘리먼트를 어떻게 그리고 왜 사용하는지 살펴보자. | 엘리먼트 중첩 계층적 방식으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것이다.ReactDOM.render()에는 하나의 React 엘리먼트만 인자로 전달할 수 있다는 점이 중요하다. -> 이점때문에, 다양한 엘리먼트들을 보여주기위해 div 태그로 감싸주는 이유이다. 내 생각엔 이 부분이 제일 중요한 점인것 같다.동일한 DOM 계층에 h1요소 두개를 렌더링해여 하는 경우에 문제가 발생한다. 이경우 아래 그림처럼 시각적으로 영..
React:리액트 교과서 1장(리액트 살펴보기) 이 글은 리액트 교과서 저서를 읽고, 중요 부분을 발췌해 기록한 학습내역입니다. |시작하기에 앞서 리액트란 무엇인지, 왜 리액트를 쓰는지 또한 어떠한 특징이 있는지, 그리고 어떠한 장단점을 갖고 있는지 파악해보자. |React란 무엇인가? > 리액트는 UI 컴포넌트 라이브러리특별한 템플릿언어가 아닌 자바스크립트를 이용해 만든다.이러한 컴포넌트들은 시각적 표현과 동작을 구현하는 논리를 모두 담고있다.컴포넌트 기반의 아키텍쳐는 일반적으로 일체형 ui에 비해, 재사용과 유지보수 확장이 용이하다. 리액트의 접근법은 새로운것이 아니다. 컴포넌트로ui를 구성하는 방법을 사용한지는 오래되었지만, 리액트는 최초로 템플릿 없이 순수하게 자바스크립트만으로 이것을 가능하게 했..
React:리액트에서 mount 와 render의 차이 | 시작하기전 리액트로 개발을 하면서, redner()메소드가 불리는 렌더가 되는것과 컴포넌트가 mount 된다는 개념의 차이점이 나는 모호하게 잡혀있었다.그래서 개발을 하던 중,state가 바뀌어 render가 다시 될때 특정 액션을 해줘야 할때 render 되기전에 다시 컴포넌트가 mount 되기전에 componentWillMount (deprecated 되었으니 이제는 사용 xxx ㅠㅠ) 쪽에서 해주려 했었다..ㅠ 리덕스 state를 활용하지 않고 react의 state 변경시에 액션을 잡으려 해서 componentWillRecieveProps 주기를 쓰지않고 (지금까지는 리덕스를 주로 활용해왔으므로, 리덕스의 state는 props로 들어오므..
React -Redux saga (takeEvery함수와 take) |시작하기에 앞서 redux-saga는 몇몇 특정 액션들이 스토어에 보내질 때, 여러 task들을 함께 실행하기 위한 내부적인 함수를 감싸는 몇몇 helper effect들을 제공합니다. 그 중, redux-thunk와 비슷한 takeEvery 함수가 있는데, 가장 흔히 사용되는 함수입니다. takeEvery는 동시에 시작되는 여러 개의 fetchData instance들을 허용합니다. 이 순간에 이전의 하나 혹은 더 많은 아직 제거되지 않은 fetchData 작업들이 아직 있는 동안 새로운 fetchData 작업을 시작합니다. https://mskims.github.io/redux-saga-in-korean/advanced/Future..
React : props변화에따른 saga와 componentWillReceiveProps()에 대한 생각 및 활용 | 시작하기에 앞서, 일단 componentWillReceiveProps는 리액트 주기중, props에 변화가 있을때, 그 props를 catch하여 이전 props와 변화한 props를 비교등을 통해, 리액트 웹앱의 세부작업을 할수있는 주기이다. 사내 사이트를 만들던 중, 카트에 자동으로 메뉴가 하나 추가하는 기능을 구현했어야 했는데, 그 케이스가 아래의 두가지였다. 1. 처음사이트에 들어왔을때 유저 ux를 위해 카트에 메뉴를 하나추가2.예약기능을 위해 날짜를 변경했을시 다시 카트를 clear하고 메뉴를 하나 추가 | 어려움을 겪었던 부분 기존에 1. 처음사이트에 들어왔을때 유저 ux를 ..