본문 바로가기
반응형

React

[React/리액트] 리액트 라우터 React Router 설치하고 시작하기
React 2023. 8. 25. [React/리액트] 리액트 라우터 React Router 설치하고 시작하기 라우팅? 웹사이트의 주소(URL)에 따라 다른 페이지나 컴포넌트를 보여주는 것을 말한다. 예를 들어, www.example.com/about 주소로 이동하면 'About' 페이지가 보여지고, www.example.com/contact로 이동하면 'Contact' 페이지가 보여진다. React Router 설치 React 자체에는 이런 라우팅 기능이 없으므로, 별도의 라이브러리인 React Router를 사용한다. npm install react-router-dom App 컴포넌트 import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; BrowserRouter 웹 애플리케이션에 HTML5의 History API를 사용하여 새로고..
[React/리액트] fetch로 외부API data통신, JSON데이터를 가져오고 처리하기 연습 예제 | JSON Placeholder
React 2023. 8. 23. [React/리액트] fetch로 외부API data통신, JSON데이터를 가져오고 처리하기 연습 예제 | JSON Placeholder App.js import { useState, useEffect } from 'react'; import Form from './Form'; import Table from './Table'; function App() { const API_URL = 'https://jsonplaceholder.typicode.com/'; const [reqType, setReqType] = useState('users'); const [items, setItems] = useState([]); useEffect(() => { const fetchItems = async () => { try { const response = await fetch(`${API_URL}${reqType}`); const data = awa..
[React/리액트] useEffect | 리액트 훅(Hook) 사용 방법
React 2023. 8. 22. [React/리액트] useEffect | 리액트 훅(Hook) 사용 방법 1. useEffect란? useEffect는 리액트 훅 중 하나로, 컴포넌트가 렌더링 된 후에 실행되는 함수이다. 여기서 "부작용"이란 주로 데이터 가져오기, 화면 갱신 등을 의미한다. 컴포넌트의 상태나 프롭스가 변경될 때마다 useEffect를 사용하여 적절한 작업을 처리할 수 있다. 2. 언제 사용? 웹 애플리케이션은 사용자와 상호작용하면서 데이터가 변하고, 화면을 업데이트해야 할 때가 있다. 이때마다 useEffect를 활용하여 부작용을 처리할 수 있다. 3. 사용 방법 useEffect의 첫 번째 매개변수에는 부작용을 처리할 함수를 작성한다. 두 번째 매개변수는 의존성 배열이 있는데, 여기에 값을 넣으면 해당 값이 변경될 때만 useEffect가 실행된다. useEffect(() => { // ..
[React/리액트] 색상 팔레트 프로그램 만들기 | CSS Color Names, Hex code
React 2023. 8. 21. [React/리액트] 색상 팔레트 프로그램 만들기 | CSS Color Names, Hex code Input import colorNames from 'colornames' const Input = ({ colorValue, setColorValue, sethexValue, isDarkText, setIsDarkText }) => { return ( e.preventDefault()}> Add Color Name: { setColorValue(e.target.value) sethexValue(colorNames(e.target.value)) }} /> setIsDarkText(!isDarkText)} > 텍스트 색 전환 ) } export default Input 1. Input 컴포넌트는 색상명 입력과 텍스트 색 전환을 담당한다. 2. 요소를 만든다. 폼의 제출을 막기 위해 onSubmit 핸들러에..
[React/리액트] 검색기능을 추가한 Todo List 만들기 | SearchItem, App.js
React 2023. 8. 21. [React/리액트] 검색기능을 추가한 Todo List 만들기 | SearchItem, App.js SearchItem const SearchItem = ({ search, setSearch }) => { return ( e.preventDefault()}> Search setSearch(e.target.value)} /> ) } export default SearchItem 1. SearchItem 컴포넌트는 검색을 위한 입력 폼을 렌더링하는 역할. search와 setSearch 함수가 props로 전달. 2. 요소. onSubmit 핸들러에서 e.preventDefault()를 호출해 폼 제출 시 페이지가 리로드되지 않도록 한다. 3. 요소. 폼의 목적을 설명하는 레이블을 제공. htmlFor 속성을 사용하여 해당 요소와 연결. 4. 요소를 만든다. 검색어를 입력할 수 있는 입력 필드를 제공. i..
[React/리액트] 검색기능을 추가한 Todo List 만들기 - 컴포넌트 모음 | ItemList, AddItem, LineItem
React 2023. 8. 21. [React/리액트] 검색기능을 추가한 Todo List 만들기 - 컴포넌트 모음 | ItemList, AddItem, LineItem ItemList import LineItem from "./LineItem"; const ItemList = ({ items, handleCheck, handleDelete }) => { return ( {items.map((item) => ( ))} ) } export default ItemList 1. items 배열을 .map() 메서드를 사용하여 반복하면서 각 항목에 대해 LineItem 컴포넌트를 렌더링한다. 2. 각 LineItem 컴포넌트에는 key, item, handleCheck, 그리고 handleDelete 함수가 props로 전달된다. 3. key는 React에서 컴포넌트를 업데이트하고 재사용하기 위해 필요한 유일한 식별자. 4. item은 items 배열의 각 항목을 나타낸다. 5..
[React/리액트] JSX(JavaScript XML) | CSS 부트스트랩 적용(className), 삼항 연산자(list.map())
React 2023. 8. 17. [React/리액트] JSX(JavaScript XML) | CSS 부트스트랩 적용(className), 삼항 연산자(list.map()) 부트스트랩 CSS 사용 {x} + {y} = {x + y} className 속성을 사용하여 부트스트랩 클래스를 요소에 추가할 수 있다. card, card-body, bg-light, mb-3는 부트스트랩의 클래스 이름이다. 컴포넌트 내부에서 직접 스타일 적용 {x} + {y} = {x + y} style 속성을 사용하여 인라인 스타일을 설정할 수 있다. 스타일은 객체 형태로 전달되며, CSS 속성 이름은 카멜 케이스 형태로 작성되어야 한다. 삼항 연산자 // 기본 구조 condition ? valueIfTrue : valueIfFalse const CountryList = function() { const list = [ { no: 1, country: '이집트', visited: false }, {..
[React/리액트] JSX(JavaScript XML) | 변수값 출력
React 2023. 8. 15. [React/리액트] JSX(JavaScript XML) | 변수값 출력 JSX(JavaScript XML) - JSX는 리액트에서 UI를 표현하는데 사용되는 문법으로, HTML과 유사한 형태로 작성할 수 있다. - JSX 안에서는 중괄호 {}를 사용하여 JavaScript 표현식을 포함시킬 수 있다. - 이를 통해 변수, 함수 호출, 연산 결과 등을 동적으로 출력할 수 있다. const name = 'Seul'; const greeting = Hello, {name}!; ReactDOM.render(greeting, document.getElementById('root')); // 출력결과: Hello, Seul! JSX 예제 const App = function(){ let msg = 'World'; const addResult = function(x, y){ return..
[React/리액트] 간단 Todo List 예제 | Component, Props
React 2023. 8. 14. [React/리액트] 간단 Todo List 예제 | Component, Props 리액트 컴포넌트 리액트에서 컴포넌트는 UI의 독립적인 부분을 의미한다. 각 컴포넌트는 자체적인 상태(state)와 프로퍼티(props)를 가지며, 이를 조합하여 복잡한 UI를 구축할 수 있다. 컴포넌트는 재사용성과 유지보수성을 높이는 데 큰 역할을 한다. Props Props(프로퍼티)는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방법이다. Props는 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없다. 이를 통해 부모 컴포넌트의 상태를 자식 컴포넌트로 전달하여 동적인 데이터를 효과적으로 관리할 수 있다. 간단 Todo List const Title = function(props){ return ( {props.title} ); } 위 코드에서 Title 컴포넌트는 부모 컴포넌트로부터 받은 p..
반응형

티스토리툴바