목록React (6)
Stack Building
[react] 컴포넌트
component 컴포넌트 - 자바스크립트 함수와 유사하지만, 실제로는 클래스 - 화면에 무엇을 그려주는가?를 의미 - props를 받아 리액트 요소를 반환함. - render() 필수 컴포넌트는 props와 state 두 가지의 인스턴스를 가진다 - props: 컴포넌트의 mounting, updating 프로세스 시점에 값이 할당될 뿐 컴포넌트 내부에서 값을 변경할 수 없음. 컴포넌트 간에 데이터를 주고받는 방법. - state: 상황에 따라 변경되어야 하는 값 라이프 사이클에 근거하여 작성 참고 자료 React의 기본, 컴포넌트를 알아보자
[react] 예제 코드 분석
출처: 권동섭 교수님 github 검색창에 도시 이름을 영문으로 입력하면 해당 도시의 기온, 습도 등을 그래프로 보여주고, 그 아래에 평균치를 보여주며 도시 위치를 구글맵으로 보여주는 웹사이트다. 이번 프로젝트는 미세먼지 정보를 보여주는 웹사이트 프론트를 만드는 것이라서 유사한 기능을 하고 있는 예제를 분석해 보기로 했다. 아래 분석에서 node_modules 폴더는 단순한 모듈 모음이고, css는 꾸며주는 기능이므로 제외했다. public은 기본 리액트 템플릿과 똑같다. manifest.json은 웹이 안드로이드 홈에 올라갈 때 메타데이터로 쓰인다. src 안에는 actions, components, containers, reducers 폴더가 있다. actions는 액션, reducers는 리듀서를 ..
리덕스에 대해 자세히 기술한 이 페이지를 참고하여 공부 목적으로 요약 정리함 등장 배경 - 너무 많은 상태 관리 - 복잡한 코드 - 변화와 비동기(asynchronous, 위임, *)의 혼용 => 상태 변화가 일어나는 시점에 제약, 상태 변화 예측 가능하게 3가지 원칙 - 모든 state(상태)는 하나의 store 안에 하나의 객체 트리 구조로 저장 - state를 변화시키는 방법은 action 객체의 전달 외에 없다. (store.dispatch) - action에 의해 상태 트리가 어떻게 변화되는지 순수 함수로 작성해야 한다. 이 순수 함수가 바로 reducer다. 이전 state를 변경하는 것이 아니라 새로운 state 객체를 생성, 반환 action - "무언가 일어난다" 기술 (간단한 소식들이라..
[react] props와 state
공통점 - 리액트 컴포넌트에서 다루는 데이터 컴포넌트 (예제 출처: velopert 님 블로그 글) - props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수 (*) - 받아온 props 값은 this. 키워드로 조회 가능 - 단순히 props를 받아 보여주기만 하는 컴포넌트는 간단하게 함수형(예제는 출처 참고)으로 작성 가능. 함수형에는 state와 LifeCycle이 빠져 있어 초기 마운트가 미세하게 빠르고 메모리를 덜 사용함. props - 부모컴포넌트에게서 (위로부터) 받는 값 - 컴포넌트 자체에서 defaultProps로 설정 가능 (빠트리거나 일부러 비우는 경우) 디폴트 선언 방법은 두가지가 있음 (위 예제 출처 게시글 참고)..
이 글을 공부 목적으로 일부 요약, 발췌함 - 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리. - View에만 초점, 라우팅 기술 없음 특징 1. JSX 문법 (여기에 정리함, 과 같이 html 코드를 여러개의 리액트 파일로 분할하여 작업 가능) 2. 컴포넌트 기반 (코드 재사용, 유지보수 가능, 한 페이지에 한 html 파일 방식 아님) 3. Virtual DOM (불필요한 연산이 매번 일어나는 기존 DOM을 한번 더 추상화해 변화를 미리 인지할 수 있도록 함. 사용자가 변화를 인지하지 않아도 가상 돔에서 자동으로 감지, 업데이트) 참고 리액트 서버 사이드 랜더링 설명