본문 바로가기

REACT

 (7)
[REACT] react router 사용해보기 리액트 라우터를 처음 사용해보고 간단히 정리한 내용입니다 참고로 리액트 라우터 v6를 사용했습니다 1. 라우팅이란? 간단히 설명하면 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것을 말합니다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트 관리하기 위해 필요한 것이 라우팅 시스템입니다. 2. react router 사용해보기 리액트에서 라우트 시스템을 구축하기 위한 방법은 여러가지가 있지만 가장 인기있고 라우팅 기능만을 익히는데 적합한 react router를 사용해보겠습니다. 2.1. 설치 yarn add react-router-dom 2.1. 프로젝트에 라우터 적용해보기 프로젝트에 리액트 라우터를 적용할 때는 BrowserRouter라는 컴포넌..
[React] HOOK 맛보기 (State hook, Effect hook) react hook은 기존 Class 코드를 작성할 필요 없이 함수 컴포넌트에서 state와 life cycle method를 이용할 수 있도록 도와줍니다. 굳이 기존의 Class 컴포넌트들을 함수형으로 다 바꿀 필요는 없지만 코드의 유지보수성과 가독성을 위해서 상황에 따라 Hooks를 사용하는 게 더 좋을때도 있다고 하니 배워보려 합니다!! 오늘은 useState와 useEffect에 대해서 알아보도록 하겠습니다. 1. useState -함수형 컴포넌트에서 상태를 관리해야 할 때 사용 -실제의 state 값과 업데이트 할 수 있는 함수 두 개를 리턴 (아래 예시에서는 count와 setCount 두 가지 호출) ※ hooks에서는 this 사용하지 않음 2. useEffect -리액트 컴포넌트가 렌더링..
[React] 게시판 만들기 (4) - 삭제 기능 구현하기 저장된 데이터 옆에 X 버튼을 만들고, 이것을 누르면 데이터가 삭제되는 기능을 구현해보려 합니다 class App5 extends Component { ~~ 생략 ~~ handleRemove = (brdno) => { this.setState({ boards: this.state.boards.filter(row => row.brdno !== brdno) }) } ~~ 생략 ~~ render() { const { boards } = this.state; return ( ~~ 생략 ~~ { boards.map(row => () ) } ~~ 생략 ~~ } class BoardItem extends React.Component { handleRemove = () => { const { row, onRemove ..
[React] 게시판 만들기 (3) - 값을 입력받아서 저장하는 기능 구현 값을 입력 받아서 데이터를 추가하는 기능을 만들어 보려고 합니다. import { render } from "@testing-library/react"; import React, { Component } from "react"; class App extends Component { state = { maxNo: 3, boards: [ { brdno: 1, brdwriter: "Lee SunSin", brdtitle: "If you intend to live you die", brddate: new Date(), }, { brdno: 2, brdwriter: "So SiNo", brdtitle: "Founder for two countries", brddate: new Date(), }, ], }; han..
[React] 게시판 만들기 (2) - 테이블 태그로 게시판 리스트처럼 출력하기 저번 코드에 이어서 테이블 태그로 간단한 게시판 형태로 만들어주기! 이때 map 메서드는 배열 내의 모든 요소에 대해 함수를 호출한 결과를 모아서 새로운 배열을 반환해 줍니다. 배열의 엘리먼트는 key 값을 가지고 있어야 하기 때문에 key={row.brdno}를 지정해 줍니다. key 값을 가져야 하는 이유는 안정적인 고유성을 주기 위해서인데 자세한 글은 아래를 참고해주세요!! https://ko.reactjs.org/docs/lists-and-keys.html 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org BoardItem이라는 컴포넌트를 만들고 props를 통해 부모로부터 받은 데이터를 사용합니다.
[React] 게시판 만들기 (1) - 주어진 배열의 내용 출력하기 ※최근에 공부하면서 슬럼프가 자주 왔는데 공부는 하고 있는데 뭘 만들 수 없을 것 같은 느낌? 때문인 것 같았다 그래서 react는 내가 만들고 싶은 웹사이트를 만들면서 공부해보려고 한다. 그 전에 기초가 될 게시판부터 만들면서 기본 개념을 익혀보자! 먼저 주어진 배열의 내용을 출력하는 기능을 구현해 보려 한다 (1) boards에 두 개의 데이터를 입력하고 (2) 위의 데이터를 render()에서 출력한다 이때 App 컴포넌트에 있는 state를 사용하기 위해 this.state로 지정해준다. this.state에 있는 것 중에서 하나를 가지고 와야 하므로 대괄호를 사용하여 { boards }로 나타낸다 (3) 실행 결과 (+) 대괄호의 사용 1. 자바스크립트에서 함수의 범위 또는 JSON 2. 변수 ..
state 와 props 이해하기 state -쉽게 말하면 컴포넌트에서 저장해야 될 자료 props -부모 컴포넌트나 다른 컴포넌트로 부터 데이터를 받아서 이를 표기하기 위해 쓰임 컴포넌트 자신이 사용하는 것은 state이고, 부모로부터 받은 것은 props이다.

티스토리툴바