Tech/React (7) 썸네일형 리스트형 프론트 입문 리액트 삽질기 7 - 라우팅 : React router - 1 이 글은 Veloport님의 포스팅을 참조했습니다. react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG 이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지 velopert.com 지난 글들을 통해 만든 프로젝트들은 모두 http://localhost:3000 경로에서만 동작했습니다. 리액트는 JavaScript 라이브러리로, 앵귤러같은 프레임워크와 달리 라우팅 기능이 기본적으로 탑재되어 있지 않습니다. 보통 리액트에서 라우팅 라이브러리로 많이 사용하는게 react-router, next.js 라고 하는데.. 프론트 입문 리액트 삽질기 6 - Material UI 입혀보기 지난번 만든 간단한 카드 페이지에 Material UI를 입혀보려 합니다. 프론트에서 비주얼은 중요하니깐요! Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com react 프로젝트에서 터미널을 열어 다음 명령어를 입력합니다. npm install @material-ui/core 일단 제일 보기 싫었던 button과 input부터 손봅니다. import { useState } from 'react'; import Button from '@materi.. 프론트 입문 리액트 삽질기 5 - 배열을 활용한 컴포넌트 수정, 삭제 지난번 글에서 입력을 받아 카드들을 만들어 입력칸 밑에 배열로 쭈르륵 나타내 주는 페이지를 만들었습니다. 이제 이 컴포넌트에 수정, 삭제 버튼을 만들어 보려고 합니다. 이전 글에서 cardList 배열에 각 카드들의 정보를 삽입하고, CardInfoListView 컴포넌트에서 해당 배열을 받아와 CardInfo 컴포넌트로 map해 주었습니다. //App.js function App() { //... return ( React Array Example handleOnCreate(cardInfo)} /> ); } //CardInfoListView.js function CardInfoListView({ cardList = [] }) { return ( {cardList.map(card => ())} ); } .. 프론트 입문 리액트 삽질기 4 - 배열을 활용한 컴포넌트 생성 지난번 글에서 컴포넌트를 동적으로 생성하지 못해 componentWillUnmount 훅을 만들지 못했습니다. 이제 배열을 통해 컴포넌트를 동적으로 생성, 업데이트, 그리고 제거해 보겠습니다. 이 글은 Veloport님의 블로그와 리액트 공식 문서를 참고하여 작성했습니다. 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org 누구든지 하는 리액트 7편: 배열 다루기 (1) 생성과 렌더링 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 이번에는 리액트 프로젝트에서 배열을 다루는 방법을 알아보겠습니다. 리액트에서는 배열을 velopert.c.. 프론트 입문 리액트 삽질기 3 - Effect Hook으로 Lifecycle API 동작 구현하기 클래스형 컴포넌트에서 사용하던 state는 함수형 컴포넌트에서 State Hook으로 대체하여 사용할 수 있었습니다. 이제 특정 동작을 수행(?) 했을 때 동작하는 함수를 추가해 보려고 합니다. 기존 클래스형 컴포넌트에서는 Lifecycle API라는 컴포넌트의 생성, 업데이트, 제거 시 호출되는 API를 사용해 브라우저에 컴포넌트가 생성, 업데이트 혹은 삭제되었을 때 특정 액션을 수행하도록 작성할 수 있었습니다. import React, { Component } from 'react'; class Example extends Component { componentDidMount() { // 컴포넌트 생성 } componentDidUpdate(prevProps, prevState, snapshot) { .. 프론트 입문 리액트 삽질기 2 - Props, State Hook 지난번 글에서 Create-React-App을 통해 App 이라는 컴포넌트를 만들어 줬습니다. 이제 이 컴포넌트에 입력 상자를 하나 두고, 버튼을 누르면 환영 팝업이 나타나는 페이지를 하나 구성하려고 합니다. 컴포넌트 내부에 변수를 설정하고 넘기는 일련의 과정이 필요하겠죠? 일단은 아무런 인자도 받지 않고, 이름도 하드코딩 되어 있는 새로운 컴포넌트인 Greeting을 생성해 봅니다. function Greeting(){ return ( Hello, My name is Sean! ); } export default Greeting; 이제 이 Greeting 컴포넌트를 App 컴포넌트 내부에 배치해 봅니다. import { Fragment } from 'react'; import './App.css'; i.. 프론트 입문 리액트 삽질기 1 - Create React App, Functional Component 안녕하세요, 백엔드 개발자로 근무하다 프론트가 어떻게 돌아가는지는 알고 협업을 하는게 좋지 않을까? 라는 생각이 문득 들어 리액트 스터디를 시작하게 되었습니다. JS에 아직 익숙하지도 않고, 프론트라곤 angular, php만 살짝 건드려본 백엔드 개발자의 프론트 삽질기(흑역사)를 공유하기 위해 블로그에 기록을 시작하게 되었습니다. 공부하는 단계다 보니 정확하지 않은 정보를 올릴 수도 있어 따끔한 지적과 조언을 소중히 귀담아 듣겠습니다. 개발환경은 Mac os Big Sur, Apple M1 Sillicon 입니다. 다음 명령어를 사용해 node를 설치해 줍니다. brew install node 다음 명령어를 사용해 yarn을 설치해 줍니다. npm install --global yarn 설치된 node.. 이전 1 다음
