전체 글
-
context APIJavascript/React.js 2020. 5. 13. 20:53
context API 프로젝트에서 전역적으로 사용할 데이터(로그인 정보, 앱 환경 설정 등)가 있을 때 유용한 기능이다. 리액트는 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터는 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 여기서 G 컴포넌트는 전역 상태를 업데이트하고, F와 J 컴포넌트는 리렌더링한다고 가정하자. 그리고 App이 지니고 있는 value를 F,G 컴포넌트에 전달하려면 여러 컴포넌트를 거쳐 불편하다. 이렇게 context API를 사용하면 context를 만들어 단 한 번에 원하는 값을 받아올 수 있다. 예제 src/contexts -> color.js : context 데이터 관리 src/components -> ColorBox.js :..
-
외부 API를 연동해 뉴스 뷰어 만들기Javascript/React.js 2020. 5. 12. 20:21
axios 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트이다. Promise 기반으로 처리한다. 예시 불러오기 버튼을 누르면 JSONPlaceholder에서 제공하는 API를 호출하고 이에 대한 응답을 state에 넣어서 보여주는 예제이다. 뉴스 뷰어 예제 /src/components -> Categories.js : 카테고리 출력 -> NewsItem.js : 단일 기사 출력 -> NewsList.js : 기사 리스트 출력 /src/lib -> usePromise.js : promise 함수를 간결하게 처리하도록 도와준다. /src/pages -> NewsPage.js : 라우터 적용하도록 도와준다. /src/App.js
-
SPAJavascript/React.js 2020. 5. 11. 17:09
SPA Single Page Application의 약어이다. 말 그대로 안 페이지로 이루어진 애플리케이션이라는 의미이다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줬다. 이렇게 화면을 서버 측에서 준비했다. 이럴 경우, 서버에 트래픽이 너무 많이 나오거나, 사용자가 몰려 서버에 높은 부하가 걸릴 수 있다. 그래서 리액트는 뷰 렌더링을 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에서 불러와서 실행시킨 후에 사용자와 인터렉션이 발생하면 필요한 부분만 자바스크립트로 업데이트한다. 만약 새로운 데이터가 필요하다면 서버 API를 ..
-
최적화 방법Javascript/React.js 2020. 5. 6. 22:22
느려지는 원인 분석 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생한다. 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때 기존 프로젝트의 상황을 분석해보면 '할 일 1' 항목을 체크할 경우 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링된다. 부모 컴포넌트가 리렌더링되었으니 TodoList 컴포넌트가 리렌더링되고 그 안의 무수히 많은 컴포넌트들도 리렌더링된다. '할 일 2' ~ '할 일 2500'은 사실 리렌더링 할 필요가 없다. React.memo 클래스 컴포넌트는 shouldComponentUpdate를 사용하고 함수형 컴포넌트는 이것을 이용해 컴포넌트의 props가 바뀌..
-
chrome 개발자 도구를 통한 성능 모니터링Javascript/React.js 2020. 5. 6. 21:50
option + command + i 위의 커멘드를 입력하면 개발자 도구가 나타난다. 여기서 Performance 탭을 열고 녹화 버튼을 눌러 어떤 액션을 취한다.(ex. 체크박스를 누른다.) 그리고 Stop 버튼을 누르면 다음과 같은 분석 결과가 나타난다. 여기서 Timings를 열면 각 시간대에 컴포넌트의 어떤 작업이 처리되었는지 확인할 수 있다. 확인 결과, 대략 0.8초가 걸렸는데 데이터가 2500개밖에 안되는데 이정도 속도라면 최적화가 필요하다는 것을 알 수 있다.
-
컴포넌트 스타일링Javascript/React.js 2020. 5. 4. 18:09
일반 CSS 일반적으로 사용하는 css 방식이다. Sass CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. scss, sass 확장자를 지원한다. .sass .scss CSS Module CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다. styled-components 스타일을 자바스크립트 파일에 내장하는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있다.
-
HooksJavascript/React.js 2020. 5. 4. 18:04
hooks 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. useState 가장 기본적인 hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있다. (사용법은 이미 익혔으니 생략) useEffect 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook이다. componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다. 만약 마운트 될때만 실행하고 싶다면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 된다. useEffect(() => {~~}, []); 특정 값이 업데이트될 때만 실행하고 싶다면 두 번째 파라미터에 검사하고 싶은 값을 넣어준다. useEf..