본문 바로가기

react

(29)

React / Router 실습 - 동물 정보 사이트 만들기 기능 목록메인 페이지에서 동물 목록 화면에 표시하기동물 상세 정보 페이지 만들기동물 이름으로 검색 기능 & 검색 결과 페이지 만들기 컴포넌트 구성main.jsx⎿ app.jsx ⎿ Main.jsx ⎿ Detail.jsx ⎿ Search.jsx 1. 동물 목록을 화면에 표시하기main.jsxReact Router를 앱 전체적으로 사용하기 위해서 App 컴포넌트를 BrowserRouter 컴포넌트로 감싸고 있다.createRoot(document.getElementById('root')).render( ,); App.jsx각각의 Route에서는 각 페이지의 컴포넌트를 요소로 불러와 분기별로 화면에 표시하도록 하고,Routes는 이 Route들을 ..

React / Router React Router React에서 SPA 방식으로 라우팅할 수 있게 해주는 라이브러리* 라우팅 : 요청 주소에 맞는 화면을 보여주는 것 사용 방법설치이미 생성된 react 프로젝트에 설치해주면 된다.npm i react-router-dom 주요 컴포넌트 React Router를 사용하고 싶은 곳을 해당 컴포넌트로 감싼다.이 때 아래처럼 App 컴포넌트를 감싸게 되면 라우팅 기능을 앱 전체에 적용시켜주기 때문에 이러한 방식이 많이 사용된다. * StrictMode는 애플리케이션 내 잠재적인 문제를 알아내기 위한 도구로, UI는 렌더링하지 않으며 자손들에 대한 부가적인 검사와 경고를 활성화한다.createRoot(document.getElementById('root')).render( ..

React / 조건부 렌더링 조건부 렌더링 리액트에서는 단순 값만이 아닌 HTML 구조나 디자인도 당연히 바꿔서 리렌더링 할 수도 있다.조건부 렌더링으로 할 수 있는데, 이는 특정 조건에 따라 다른 컴포넌트나 요소를 렌더링하는 것으로, 조건문이나 논리 연산자를 활용할 수 있다. 다음은 특정 감정 버튼을 누르면 그 감정의 표정을 화면에 렌더링시키는 코드다. setMood()로 감정의 상태를 변경해주고 있는데, 이 때 세가지 방법으로 리렌더링해줄 수 있다. App.jsxfunction App() { const [mood, setMood] = useState('Normal'); return ( 기분 : {mood} setMood('Ha..

React / state, props를 이용해 CRUD 기능을 가진 Todo-List 만들기 App.jsx더보기 import { useState } from 'react';import './App.css';function App() { const [todoList, setTodoList] = useState([ { id: 0, content: '밥먹기' }, { id: 1, content: '공부하기' }, { id: 2, content: '잠자기' }, ]); return ( );}function TodoInput({ todoList, setTodoList }) { const [inputValue, setInputValue] = useState(''); const insertTodo = () => { if (!inp..

React / props, state 끌어올리기 Props (property)props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 정보의 집합으로, 객체 형태로 데이터를 포함하고 있다. 특징React 내에서 속성으로 사용됨읽기전용(Read-only)임부모로부터 전달된 Props는 자식 컴포넌트에서 변경 불가능(정의된 데이터를 수정하려면 부모 컴포넌트에서 데이터를 변경해야 함) 사용 방법부모 컴포넌트 자식 컴포넌트 // 함수형function 자식 컴포넌트 ({props이름}){}// 클래스형super(props)props.props이름// 또는this.props.props이름 이전 글(상태관리)에서 사용했던 counter 코드를 이용해서 props를 확인해보겠다. 부모 컴포넌트에서 Count(자식 컴포넌트의 이름) 요소를 만들고, 그 안에..

React / Eslint(airbnb ...?) prettier 적용하기 + 250416 수정 내용▼더보기- eslint-plugin-import, eslint-plugin-jsx-a11y 부분 import, plugin, rules에 빼먹은거 수정- 그 외 에어비엔비 규칙 일부 추가원래 제목에는 airbnb 형식이라고 썼었는데사실 airbnb 패키지는 내가 이 포스트에서 작성한 Flat Config 형식에서는 아직 지원하지 않고 있다... 수정 전에도 eslint-config-airbnb는 flat config에서 아직은 사용할 수 없기 때문에 rules에서 수동으로 불러와줘야 한다고 중간에 작성해두긴 했으나 아예 끌올해둔다... 왜냐하면 기존 .eslintrc 파일 형식에서는 "extends":["airbnb"] 를 추가해주는 식으로 사용이 가능하지만Flat Config ..

React / SPA vs MPA React는 상태 변경 함수를 사용하지 않으면 상태 변경을 감지하지 못한다. 불필요한 렌더링을 방지하기 위해 상태 변경을 감지해야만 화면을 업데이트 하도록 하는 작동방식 때문이다.React는 변경된 상태를 사용하는 컴포넌트만 리렌더링해 업데이트 하는 SPA 구현 방법을 사용해 대표적인 SPA 라이브러리이다. SPA(Single Page Application) : 한 개의 페이지로 구성된 애플리케이션작동 방식초기에 HTML 1개만 로드이후 페이지 이동은 JS로 필요한 데이터만 받아와 그려줌 (URL이 바뀌어도 실제로 한 페이지에서 동작)페이지 전환시 새로고침이 일어나지 않아 앱처럼 부드럽게 작동특징CSR(Client Side Rendering) : 화면을 완성하는 주체가 클라이언트초기 로딩이 좀 무겁지만..

React / 상태관리 리액트는 선언적 프로그래밍(무엇을 결과로 얻고자 하는지 설명하는 방식)을 할 수 있게 한다.무엇을 화면에 표현할지 JSX문법으로 표현하면, JSX에 들어가는 데이터가 변화했을 때 데이터가 맞는 화면이 결과로 표시된다. 상태(state)React 컴포넌트의 상태로, 동적으로 변경되어야 하는 데이터를 사용할 때 state를 사용한다.state는 변경할 수 있는 데이터고, 상태가 변경되면 컴포넌트가 리렌더링 되기 때문에 데이터 흐름에 사용되는 값만 state에 포함되어야 한다. 아래는 state를 사용하지 않은 예시다.function App() { let counter = 0; function increase() { counter++; console.log(counter); } functi..

이전 1 2 3 4 다음

티스토리툴바