'싱글 페이지 앱(SPA)'이 멀티 페이지 앱과 가장 큰 차별점은 다음과 같습니다. "앱을 navigation할 때 완전 새로운 페이지가 로딩되는 일이 없다!!" 그 대신에 페이지 안에서 인라인으로 View를 로딩하는 것이죠!! SPA로 개발할 때 신경써줘야 할 부분 - 1. 주소 표시줄의 URL은 항상 지금 보고 있는 화의 진짜 URL과 같아야 함. 2. 브라우저의 이전/다음 버튼을 사용 가능해야 함. 3. 정확한 URL을 사용해 특정 View를 바로 볼 수 있어야 함. * 멀티 페이지 앱(MPA)에서는 전혀 신경쓰지 않아도 되는 부분을 신경써줘야 한다는 얘기 ㅜ 이 모든 걸 처리하기 위해서 라우팅(Routing) 을 사용해야 합니다. 라우팅은 URL을 물리적인 페이지 (Multi Page Applic..

ref ? 리액트 세계에선 JSX로 마크업 표현이 다 가능한데 왜 굳이 DOM에 직접 접근을 해야하는가! 여러 경우가 있습니다! - form태그에서 input에 focus할 때 - 특정 DOM의 크기/ 스크롤 위치를 가져오거나 설정할 때 - 외부 라이브러리를 사용할 때 portal? ReactDOM.createProtal()을 리턴해 기존에 계속 id값이 container인 div태그 안의 범위에 있는 걸 벗어나서 페이지의 어느 Element든 직접 접근이 가능해집니다! (포털을 사용함으로써 기존의 부모-자식으로 이뤄진 계층 구조를 벗어날 수 있다) class Container extends React.Component{ render(){ return( container jsx, destination )..

우선, React Component가 하는 일? render()메소드를 사용해 무엇을 렌더링할 지 설명합니다. 하지만, Componenet가 렌더링 되기 전/후에 추가적인 동작은 render()메소드에서 처리할 수 없습니다. 컴포넌트 LifeCycle 컴포넌트는 렌더링 전/렌더링 중/렌더링 후 등의 다양한 단계가 있습니다. 리액트에선 이런 과정을 컴포넌트 생명주기라 부르고 React컴포넌트는 이런 과정을 거칩니다. 이런 과정 단계에 원하는 메소드를 끼워 실행시켜 전반적인 제어를 할 수 있습니다. 이런 메소드를 Component LifeCycle API라 합니다 이런 컴포넌트 생명주기 메소드는 세 그룹으로 나뉩니다. 1. 마운트 : 컴포넌트가 DOM에 삽입되는 단계 2. 업데이트 : 실제 DOM이 업데이트..

this.state를 사용하면 Component의 render()에 데이터를 전달할 수 있습니다. this.props : - 부모에서 전달되는 읽기 전용 데이터 (상수처럼 사용) - 자식에서 변경 불가! 데이터 값을 변경할 수 없다 this.state : - Component의 private데이터를 저장하고(클래스 내에서만 접근 가능한) Component에 의해 변경 가능. - state가 업데이트(변경)되면 Componenet는 스스로 렌더링 작업을 한다. 주의!! state는 업데이트 되지 않는 데이터를 가지면 안된다. state = { isHeaderHidden : false title : 'welcome this stateful component' } ... return( this.state.ti..

React Element : React.createElement()로 정의. 가볍고, stateless 하며 불변하며 DOM Element의 가상 표현식입니다. ReactElement는 가상 DOM 안에 포함되어 있고, 이 개념들이 노드를 생성 - HTML 태그들이 바로 이런 Element (div / table / h1 / Fragment...) var ele = React.createElement('div'); ReactDOM.render( ele, document.getElementById('exam'); ) JSX는 HTML코드를 ReactElements로 컴파일 아래 코드 형식. var ele = this is div ReactDOM.render( ele, document.getElementBy..

JSX는 HTML 코드와 비슷하지만 자바스크립트로 변환됩니다. 리액트 컴포넌트를 사용할 때 쓰는 문법입니다. 꼭 닫혀야 하는 태그 (x) (o) - self closing tag 두개 이상의 Element는 무조건 하나의 Element로 감싸져 있어야 한다 // 따로 따로 Element가 있으면 error! class ReactApp extents Component { render(){ return ( hello!!! world!! ) } } // 이렇게 두 개의 div Element는 Element로 감싸져야 한다 class ReactApp extents Component { render(){ return ( hello!!! world!! ) } } // React 16.2부터 도입된 Fragment를..