본문 바로가기

Programing/React72

040. React 입문 - useRef로 컴포넌트의 변수 생성하기 개념useState와 useRef는 컴포넌트 내부에서 변수처럼 사용한다는 점은 동일하지만 useRef는 값이 변하더라도 컴포넌트를 재 렌더링 하지 않는다는 점이 큰 차이다.그리고 useRef는 DOM 요소를 직접적으로 선택이 가능하다. 마치 자바스크립트에서 querySelector를 사용한 것과 비슷하다.사용법import 하기import { useState } from "react";import { useRef } from "react";그런데 보통 useState는 무조건 사용할 테니, 출처가 같은 hook은 서로 중괄호 하나로 묶을 수 있다.import { useState, useRef } from "react";초기값 지정하기const refObj = useRef(0);console.log(refO.. Programing/React 2024. 5. 22.
React.js에서의 이벤트 핸들러 이벤트 핸들러란?웹 페이지 내에서 마우스를 클릭하거나, 스크롤을 올리고 내리거나, 키보드를 누르는 등의 이벤트가 발생했을 때 함수를 실행되는 함수를 말한다.import React from 'react';function App() { // 이벤트 핸들러 함수 정의 function handleClick() { alert('버튼이 클릭되었습니다!'); } return ( {/* 버튼에 onClick 이벤트 핸들러 설정 */} 클릭하세요 );}export default App;위와 같이 버튼 태그에 {} 중괄호로 함수를 바인딩하여 호출할 수 있다.React에서 자주 사용되는 이벤트 핸들러onClick (버튼)특정 요소가 클릭되었을 때 동작하는 함수.function .. Programing/React 2024. 5. 22.
037. React 입문 - State와 Props 개념state는 계속해서 바뀌는 값을 저장해두는 변수를 말하고, 각각 상태 변경 함수를 둘 수 있다.그리고 리액트는 반복되는 UI는 컴포넌트로 분리해서 별도의 파일에서 작성이 가능하다. 그리고 이러한 형태로 메인 컴포넌트에서 import하여 사용 가능하다.그런데 부모 컴포넌트의 state가 변경되면 부모 컴포넌트는 재 렌더링이 되면서 부모 컴포넌트에 정의된 모든 state를 다시 초기화 하는 현상이 발생한다.// App.jsxconst [users, setUsers] = useState(['장원영', '안유진']);const [count, setCount] = useState(0);만약 위와 같이 App 컴포넌트에 state가 여러개 정의 되어 있을 때 이름만 보더라도 users 상태와 count 상태.. Programing/React 2024. 5. 22.
008. [part1] 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) 리액트에서 동적 UI 만드는 Step동적 UI란? 보였다 안 보였다, 뭘 누르면 보였다가 사라졌다 하거나 토글되는 UI를 말함.이런 UI를 리액트에서는 state로 UI의 상태를 나타내고 UI의 상태를 상태 변경 함수를 통해 바꿔주기만 하면 특정 조건에서 보이거나 보이지 않는 동적 UI를 만들 수 있음.HTML/CSS로 동적으로 보여질 UI를 미리 디자인한다.UI의 현재 상태를 state로 저장해두고state의 상태에 따라 UI가 보일지 말지 조건문으로 작성한다.const [modal, setModal] = useState(0);// modal창이 보였다가 안 보였다가 하게 하고 싶기 때문에 modal이라는 state를// 만들었고, 초기 상태를 숫자 0으로 설정하였음. 이것은 보이지 않는 상태라고// .. Programing/React 2024. 5. 21.
007. [코딩애플] [part1] Component 많은 div들을 한 단어로 줄이고 싶으면 컴포넌트란?리액트에서 반복되는 UI(쉽게 이야기해서 HTML영역, 물론 엄밀히 말하면 jsx 문법인 영역)을 따로 분리해서 하나의 함수로 만든 다음 간단하게 호출하는 방법을 이야기 한다.예를 들어 리액트 프로젝트를 처음 세팅하면 App.jsx에서 자바스크립트와 HTML(jsx)를 모두 여기서 작성하게 될 텐데 이것 또한 자세히 보면 function App() {}이 코드 블럭 안에 있는 하나의 컴포넌트이다.컴포넌트의 예시모달창을 HTML에서 만들었고 만약 이 태그가 복잡하고 길다면 하나의 컴포넌트로 분리해서 아래와 같이 메인 컴포넌트(보통 App.jsx)에서 호출만 해서 사용 가능하다.function App() { return ( 제목 날짜 상세내.. Programing/React 2024. 5. 21.

티스토리툴바