> Frontend/React
-
TIL-2024.04.28 - React - 004. React 에서의 반복 (+추가&제거)> Frontend/React 2024. 4. 28. 22:22
질문1. React에서 반복문을 사용하는 방법 Map 을 사용한 반복, 추가, 제거 예제import React, {useState} from 'react';const IterationSample = () => { const [names, setNames] = useState([ {id: 0, text: '민지'}, {id: 1, text: '혜린'}, {id: 2, text: '하니'}, {id: 3, text: '다니'}, {id: 4, text: '혜인'}, ]); const [inputText, setInputText] = useState(''); const [nextId, setNextId] = useState(..
-
TIL-2024.04.27 - React - 003. Event Handler> Frontend/React 2024. 4. 27. 19:33
질문:1. React에서 Event Handler 설정을 어떻게 사용할 수 있어 ? Event Handler- 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수- React에서 이벤트 핸들러는 일반적으로 JSX 문법을 사용하여 구성. 기본 예제// ParentComponent.jsimport React, {useState} from 'react';import ChildComponent from './ChildComponent';const App = () => { // useState const [message, setMessage] = useState(''); const [color, setColor] = useState('black'); const onClickEnter = ..
-
TIL-2024.04.26 - React - 002-1. 단방향 통신 (Props & Callback)> Frontend/React 2024. 4. 27. 19:33
질문:1. (내가 사용하던 Vue와 달리) React는 단방향 통신이라는데, 부모 자식간 데이터 통신을 어떻게 해? CallBack 함수 - 콜백 함수(callback function)는 다른 함수에 인수로 전달되는 함수 (다른 코드의 인수로 넘겨주는 실행 가능한 코드)- 이러한 함수는 일반적으로 비동기적인 작업이 완료되었을 때 호출 | 다른 함수의 작업이 완료되었을 때 특정한 동작을 수행하기 위해 사용- 예를 들어, 파일을 읽거나 데이터베이스에서 데이터를 가져오는 등의 비동기적인 작업이 완료되었을 때 호출되는 함수를 지정 가능 && 이벤트 핸들러에서도 콜백 함수를 사용하여 특정 이벤트가 발생했을 때 실행될 코드를 정의 가능. Callback 함수 예제 function greet(name, c..
-
TIL-2024.04.25 - React - 002. Component, Props, State> Frontend/React 2024. 4. 27. 19:33
질문:1. 컴포넌트가 뭐야 ? 2. 두개가 차이가 있어 ? 3. Props 와 State 가 뭐야? 컴포넌트:- React에서 컴포넌트는 UI를 구성하는 독립적인 부분.- 각 컴포넌트는 자체적인 상태(state)와 생명주기(lifecycle)를 가지며, 재사용 가능하고 독립적으로 관리 가능.- 두 가지 주요한 종류의 컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component). 함수형 컴포넌트: - 함수형 컴포넌트는 함수로 정의되며, 주로 간단한 UI 조각을 만드는 데 사용.- 최근 React 버전에서는 Hooks를 사용하여 함수형 컴포넌트에서도 상태와 다른 React 기능을 사용.- 함수형 컴포넌트는 간결하고 읽기 쉬움 예제:import Re..
-
TIL-2024.04.24 - React - 001. React 와 JSX> Frontend/React 2024. 4. 27. 19:32
질문:1. React 만의 특징이 뭐야? 2. 그래서 JSX가 뭐야? React 의 특징가상 DOM (Virtual DOM): - React의 핵심 개념 중 하나는 가상 DOM.- 가상 DOM은 실제 DOM의 가벼운 복제로, 상태 변경 시 전체 DOM을 새로 그리는 대신에 변경 사항을 비교하고 최소한의 업데이트만 수행JSX (JavaScript XML): - React에서는 JSX를 사용하여 UI를 작성.- JSX는 JavaScript의 확장 문법으로, HTML과 유사하게 생겼지만 JavaScript의 모든 기능을 사용.- JSX를 사용하면 UI 코드를 가독성 있고 유지보수가 쉬운 형태로 작성.컴포넌트 기반 아키텍처: - React는 컴포넌트 기반 아키텍처를 기반.- 이는 UI를 독립적인 요소로 구성..