본문 바로가기

Study/React

 (28)
Dynamic List 서로 같은 UI를 가지고 다른 data를 보여주는 컴포넌트는 원하는 만큼 재사용할 수 있다. 인스타그램의 피드 아이템이나 쇼핑 어플리케이션의 상품 목록과 같은 것이 이런 컴포넌트에 해당한다. 이 때 이러한 컴포넌트가 정확하게 몇 개 사용될지를 미리 정해서 hard coding 하는 것이 아니라, 동적으로 리스트를 업데이트한다. forEach vs. map | 왜 map을 사용해야 하는가? jsx 구문에서 컴포넌트를 요소로 갖는 배열을 전달했을 때, 리액트는 이것을 간단히 렌더링할 수 있다. 이 때 forEach 구문은 배열의 모든 아이템에 콜백 함수를 실행할 뿐이고, map 구문은 모든 아이템에 콜백 함수를 실행한 뒤에 그 아이템들로 이루어진 새로운 배열을 반환한다. map // this is worki..
prevState multiple states 하나의 컴포넌트는 하나 이상의 state를 가질 수 있다. 가지고 있는 state 중에 하나라도 값이 업데이트 되면, re-rendering이 발생한다. import { useState } from 'react'; const NewExpenseForm = (props) => { const [title, setTitle] = useState(''); const [amount, setAmount] = useState(''); const [date, setDate] = useState(''); const titleChangeHandler = (e) => { setTitle(e.target.value); }; const amountChangeHandler = (e) => { setA..
Event & useState Evnet how to add event listener? 바닐라 js에서 어플리케이션을 dynamic하게 만드는 가장 흔한 방법은 event listener를 등록하는 것이다. // Imperative Vanila JS const deleteBtn = document.querySelector('.delete'); deleteBtn.addEventListener('click', ()=>{ console.log('you clicked delete btn'); }) 그러나 리액트는 바닐라 자바스크립트의 명령형이 아니라, 선언형(declarative) 접근방식을 이용해서 코드를 작성한다. 그래서 이벤트를 등록할 때 위의 예제처럼 직접 DOM 요소를 조작하는 것이 아니라, 그 이벤트를 컴포넌트의 property..
JSX what is JSX? +) JSX, JSX in depth Javascript XML | jsx는 자바스크립트 코드 안에서 html 태그를 작성할 수 있게 해 준다. JSX는 자바스크립트 안에 속하는 개념으로, 자바스크립트를 html과 비슷한 문법으로 사용할 수 있게 만들어 주는 확장된 문법이다. React라는 라이브러리에서 jsx 문법을 순수 자바스크립트 코드로 변환해 주며, 최신 리액트 프로젝트에서는 import react 구문을 생략해도 jsx가 정상적으로 변환된다. import Expenses from './components/Expenses'; function App() { return ( Hello, world! ); } 일반적으로 컴포넌트를 만들 때 사용하는 방식이다. import Reac..
Component & Props how to make Component? 1. structure // components/ExpenseItem.js function ExpenseItem() { return expense item!; } export default ExpenseItem; // app.js import ExpenseItem from './components/ExpenseItem'; function App() { return ( ); } export default App; src/ components | 이 폴더 안에서 각 컴포넌트 별로 파일을 만들어서 작업한다. 이 때 App 컴포넌트는 일반적인 UI와는 다른 root 컴포넌트이기 때문에, components 폴더 안으로 이동시키지 않는다. 컴포넌트의 파일명 | 대문자로 시..
What is React? What is React? A JavaScript library for building user interfaces Javascript의 등장으로 DOM 요소를 조작할 수 있게 됨에 따라, 서버와 새로운 html을 주고 받는 통신 없이도 사용자에게 동적인 화면을 보여줄 수 있게 되었다. 이 덕분에 reactive web app과 SPA(single page app)라는 개념이 생겨났다. +) reactive web app | 사용자의 요청에 버벅거림이나 깜빡임 없이, 빠르게 반응하는 웹 어플리케이션 React는 이러한 js 기반의 어플리케이션을 쉽게 만들 수 있도록 도와주는 라이브러리(또는 light-weight framework)이다. 핵심적인 역할은, 개발자가 저수준(low level, vanilla..
MVC & Dependency Injection MVC | Model, View, Controller MVC 패턴이란, 소프트웨어 디자인 패턴 중 하나로, UI를 개발할 때 흔하게 사용된다. MVC 패턴은 어플리케이션을 세 가지 부분 model, view, controller 으로 나눈다. 이렇게 역할에 따라 Layer를 나눔으로써 더 쉽게 코드를 테스트할 수 있고, 유지보수 할 수 있다. 만약 역할을 나누지 않고, 리액트 컴포넌트 안에 네트워크 통신을 하는 로직을 작성했다면, ??? 컴포넌트의 유닛테스트에 네트워크 통신에 대한 테스트도 포함된다. 즉, 유닛 테스트를 할 때 마다 네트워크 통신이 발생하게 되는데, 이것은 매우 나쁜 상황이다. 이것을 막기 위해 layer를 나누는 MVC 모델을 이용하는 것이기도 하다. 아래에 살펴볼 Dependency ..
PostCSS what is PostCSS? Sass, Less, PostCSS와 같은 툴을 CSS PreProcessor(전처리기)라고 하는데, 이런 툴을 이용하면 우리가 순수 CSS를 작성하면서 겪는 문제를 해결하고, 한계를 극복할 수 있다. Auto Prefixer yarn create react app 명령어를 이용해서 생성된 폴더에는, 다음과 같이 다양한 툴이 자동으로 설치된 폴더가 포함된다. node modules에는 설치된 툴이 모두 포함되어있는데, 여기에 PostCSS도 포함된다. yarn 파일(설치된 모든 툴을 관리)의 autoprefixer는 PostCSS가 제공하는 기능 중 하나이다. 예를 들어, 순수 css로 fullscreen 상태일 때의 스타일을 정의하려면, 브라우저 호환성 문제 때문에 똑같은..

티스토리툴바