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를 ..
React - navbar item 클릭 후 Link to로 링크 이동시, 메뉴 토글되게하기 | 참고 링크 : https://stackoverflow.com/questions/32452695/react-bootstrap-how-to-collapse-menu-when-item-is-selected | 시작하기에 앞서, Link to로 nav bar 링크 이동시, 페이지가 리로드되는게 아니라 메뉴바가 토글(collapse)되지 않고 그대로 남아있는 현상이 발생했었다. 이를 해결하기 위해 위의 링크를 참고하여, 코드를 구현하였다. 참고로 navitem을 Link to 로 구현하는 방법은 아래와같은 속성을 navitem에 주면 되었었다.componentClass={Link} href="/board" to="/b..
React - 네이버 맵 api 활용하기 리액트로 웹앱을 개발할때 네이버 맵 api를 활용할 때가 있다. 그때 활용하는 방법을 알아보자.처음에 public/index.html 파일에 아래와 같이 바로 넣어주었다. 그럴때는 아래와 같이, 오류가 난다. cannot read property of 'style' 즉 naver maps 객체가 생성되지 않다고 나오는 것이다. 그이유는, 처음 리액트 메인페이지를 렌더링했을때 react가 마운트 되기전에 네이버 api 코드가 실행되서, mapdiv가 없는데 map을 찾아서 오류가 나고 있었던것이다. 왜냐면 나같은 경우는 첫 메인페이지에서는 네이버 map관련 div를 선언하지 않고, 길찾기 관련 컴포넌트에서만 naver map을 쓰고 있어서 길찾기 관련 컴포넌트에만 ..