Javascript/ReactJS5 immutable.js 사용 시 주의사항 find와 get의 차이점을 정확히 알고 사용하자. find는 실제 오브젝트의 레퍼런스를 주는거고, get은 새로운 오브젝트를 반환하는 것이다. 그래서 같은 리스트 내에서 같은 항목을 삭제 후 삽입 시(순서 바꾸기)를 할 경우에는 find가 아니라 get으로 해당 항목을 복사 해놓은 후 사용해야 한다. find()로 찾은 항목을 list.delete(index).insert(index, foundItem) 하면 안되다는 말이다. 2020. 4. 3. Redux 프로젝트 구조 components Redux와 연동되지 않고 단순히 보여주기 위한 컴포넌트를 프레젠테이셔널 컴포넌트라고 부른다. containers Redux와 연동된 컴포넌트를 컨테이너라고 부른다. store/modules Redux에서 사용되는 Action과 Reducer를 기능별로 분류하여 작성하는데 이를 module이라고 부른다. 보통 액션과 리듀서를 구분해서 사용하는데 합쳐서 사용하는 기법은 duck 기법이라고 한다. store/configure.js 리덕스 스토어를 생성하는 함수를 분리해놓은 파일. 서버 사이드 렌더링을 위해서 해놓은 것. store/index.js 스토어를 생성한 후에 내보내는 역할을 하는데, 그밖에도 미들 웨어를 설정하는 일을 할 수 있다. 예를들면 비동기 통신 라이브러리(redux-th.. 2019. 8. 21. Redux를 이루는 요소 Action 상태에 어떠한 변화가 필요할 때, 액션을 발생시킨다. 액션은 type속성을 필수적으로 가지고 있어야 한다. { type: 'TEST1', data: { id: 0, } } Action Creator 액션 생성함수는 말그대로 액션을 만드는 함수이다. 파라미터를 받아서 객체 형태를 리턴 해주는 형태이다. function test(data) { return { type: 'TEST1', data, } } // 화살표 함수 버전 const test = (data) => ({ type: 'TEST1', data, }) Reducer(리듀서) 리듀서는 변화를 일으키는 함수, 즉 업데이트의 역할이다. 2개의 파라미터를 받는다. function reducer(st.. 2019. 8. 21. LifeCycle API React와 ExtJS 비교해서 이해하기 React의 모든 컴포넌트는 생명주기(LifeCycle)을 가진다. 말 그대로 컴포넌트의 생성부터 소멸까지를 뜻한다. 컴포넌트 기반의 Javascript 개발에서는 생명주기와 연관된 이벤트들의 사용빈도 수가 굉장히 많기 때문에 확실히 공부하고 넘어가는 것이 좋다. componentDidMount vs afterrender 컴포넌트가 화면에 나타나게 됐을 때 호출 된다고 설명이 되어있다. ExtJS로 치면 화면에 컴포넌트가 렌더링 된 이후이기 때문에 afterrender와 같다고 볼 수 있다. React에서는 주로 외부 라이브러리를 연동하는데 사용, Ajax 통신으로 데이터를 받아오는 용도 또한 DOM의 속성을 읽거나 변경 하는 작업을 진행한다. getDerived.. 2019. 8. 16. 큰 그림 React로 무엇을 할 수 있는가? 사용자가 보고 만지는 모든 것을 할 수 있다. React의 역사는 어떻게 되는가? Facebook의 Jordan Walke가 개발 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다. 2013년 5월 JSConf US에서 오픈 소스화되었다. React를 구성하는 모든 요소와 특징이 무엇인가? 고유의 특징도 있는가? JSX Props 단방향 바인딩 Stateful component Virtual DOM 라이프 사이클 메서드 삼항 조건문 Nested React에서 사용하는 라이브러리들은 무엇이 있는가? Create React App Styled Components Redux.. 2019. 8. 11. 이전 1 다음
