본문 바로가기

react33

[클론 코딩] 뉴스 뷰어 만들기 이번에 가져온 클론 코딩은 뉴스 뷰어입니다. 이 프로젝트는 VELOPERT 님의 '리액트를 다루는 기술 개정판' 14장의 내용을 클론 코딩하였습니다. TODO-LIST의 리액트 기초 기술들을 다시 되돌아보고, 외부 API 연동까지 한 번에 챙겨가는 프로젝트가 되었으면 좋겠습니다. 1. 비동기 처리 외부에서 데이터를 받아서 우리 홈페이지에 보여줄 것이기 때문에 비동기처리가 필수적입니다. 그렇지 않으면 정보가 로딩되는 동안 기다려야하죠. 비동기와 그에 대한 자바스크립트 구문 설명은 아래 링크들을 참조해주세요. 2021.05.24 - [Programming/Javascript] - [Javascript] 프로미스(promise) 객체 2021.05.24 - [Programming/Javascript] - [J.. 2021. 12. 29.
[React] useState의 비동기적 동작 1. setState의 비동기적 동작 함수형 컴포넌트로 간단한 카운터를 만들었습니다. import React, {useState} from 'react'; const Counter2 = () => { const [count, setCount] = useState(0); const onClick = () => { setCount(count+1); console.log('click'); setCount(count+1); console.log('click'); } return ( {count} + ); } export default Counter2; 실행해보기전에 동작을 예측해보자면, state의 count가 두 번 증가해서 결과적으로 버튼을 누르면 카운트가 2씩 증가할 것 같습니다. 그럼 실행해볼까요? 우선.. 2021. 12. 27.
[클론 코딩] Todo List 컴포넌트 성능 최적화 지난번 포스팅을 통해서 Todo List 앱을 완성시켰습니다. 하지만 최적화 과정이 없이 기능만을 구현했기에 성능 퍼포먼스는 좋다고는 할 수 없습니다. 비록 클론 코딩이지만 실제 개발에서 요구사항을 충족하는 개발에 성능 또한 중요시 여기므로 성능을 최적화 시키는 방법도 알아보겠습니다. 1. 컴포넌트 리렌더링 최적화를 해야하는 이유는 컴포넌트 리렌더링 때문입니다. 웹사이트에서 로딩이 발생하는 이유는 인터넷 대역폭 문제도 있겠지만, 우리가 겪는 로딩이 긴 사이트의 문제점은 웹 사이트의 구성 요소를 불러오는 시간 때문입니다. 즉, 화면에 그려야하는 요소가 많을수록 로딩이 길어지는 것입니다. 리액트를 처음 이야기 할 때, 컴포넌트들을 레고 조립하듯이 만든다고 소개했는데요. 이렇게 조립시킨 컴포넌트가 많아서 렌더.. 2021. 12. 23.
[클론 코딩] TODO LIST 기능 구현 지난 포스트에서 기본세팅과 UI를 구성했습니다. 이제 껍질의 내용물들을 구현해보도록 하겠습니다. 1. todos 우리가 만드는 TODO 앱은 App.js에서 배열의 형태로 관리됩니다. 그러기 위해서 useState Hook를 이용해서 todo를 관리하고 이 todos배열을 TodoList 컴포넌트의 props로 전달해서 보여주게 됩니다. const App = () => { const [todos, setTodos] = useState([ { id: 1, text: 'TODO LIST 앱 완성하기', checked: true, }, { id: 2, text: '블로그 포스팅하기', checked: false, }, ]); return ( ); }; todos 배열을 뜯어보고 지나가자면, 배열안에는 각 항목.. 2021. 12. 21.
[클론 코딩] TODO LIST 여기저기를 뒤져보니 리액트를 기초적으로 배우고 난뒤에는 TODO LIST를 만들어 보는 것이 마치 국룰처럼 자리잡아 있었습니다. 그래서 저도 시작은 TODO 리스트로 결정했습니다. 클론 코딩 대상은 리액트로 유명한 VELOPERT 님의 TODO LIST를 가지고 따라가 보도록 하겠습니다. 기본적으로 큰 틀은 따라가되 일부분에서는 제 개인 성향이 들어간 수정이 있을 예정입니다. 0. 사전 준비 우선 yarn create react-app으로 프로젝트를 위한 공간을 만들어 줍니다. 저는 todo-list라는 이름으로 작업공간을 만들었습니다. 그리고 우리가 사용할 react-icons와 classnames, node-sass를 설치해줍니다. react-icons는 리액트에서 여러 아이콘 디자인들을 사용할 수 .. 2021. 12. 20.
react-icons 이번에 소개하는 것은 기술은 아니고 깔끔한 아이콘 디자인을 제공하는 라이브러리를 하나 소개해드리려고합니다. 1. react-icons https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons... 2021. 12. 16.
300x250