why Next.js ? next.js -> 리액트 기반의 프레임워크로 서버 사이드 렌더링(SSR)을 지원하는 프레임워크라 SEO같은 것들을 쉽게 적용할 수 있다. npx로 설치하지 않고 'create-next-app'이란 명령어로 생성 'create-react-app'이 아니다. npx create-next-app nextjs-tutorial 설치 후 package.json에서 확인 npm run dev 명령어로 실행시켜 로컬환경에서 돌려볼 수 있다. UI 프레임워크 사용 ( sementic ui ) sementic uinpm install semantic-ui-react semantic-ui-css sementic uinpm install semantic-ui-react semantic-ui-css ..

Redux? 우리는 리액트의 state 관리하는 것과 UI와의 일관성 유지하는 게 중요하다는 것을 알고?있습니다. (중요합니다ㅎ) 그런데 웹 애플리케이션이 훨씬 복잡해지고 많은 계층구조가 생기면(부모-자식-손자-증손자...) state관리는 극혐이됩니다. 각 계층은 자신이 가지는 기능을 해야하고 그 기능 수행을 위해 어떤 관계에서는 state를 가져와 사용하는 의존관계가 심화될 수 있습니다. 밑의 그림을 보면 서로서로 아주 격렬하게 의존관계가 생성됨을 알 수 있습니다... 애플리케이션 'state관리'라는 문제를 좀 해소시켜보자 해서 'Redux'라는 게 등장했습니다. 위의 그림을 보면 리덕스는 애플리케이션의 state를 다루고 저장하는 마법을 애플리케이션에 부여하는 일만 신경씁니다. 그리고 그것을 '스..

'싱글 페이지 앱(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..