Frontend/React20 React : useRef에 대해서 useRef는 리액트 훅의 한 종류로, DOM 요소에 직접적으로 접근을 해서 불필요한 재렌더링을 방지하는 역할을 한다. 과도한 useRef 사용은 성능 저하가 발생할 수 있어, 보통 직접적으로 DOM 조작이 필요하거나 렌더링과 무관하게 상태를 저장할 필요가 있을 때 사용하는 것이 바람직하다. import { useRef } from 'react';const Ref변수명 = useRef(초기값);- 초기값 : useRef 객체의 current 속성 초기 설정값이다.Ref변수명.currentuseRef는 단일 프로퍼티(current 프로퍼티)를 가진 객체를 반환한다. 이 속성에 해당 useRef 접근하여 값을 조회 및 수정할 수 있다. useRef를 사용한 값 참조useState와 useRef를 비교해보았다.. 2024. 8. 29. React: 컴포넌트에 CSS 적용하기 React에서 CSS를 적용하는 방법은 인라인 스타일 적용, CSS 파일 작성 후에 해당 컴포넌트에 파일을 import 하는 경우 그리고 CSS-module을 사용하는 방법이다. 인라인 스타일 인라인 스타일의 경우 가장 간단하고 쉬운 방법이다. HTML의 인라인 스타일처럼 스타일을 적용할 대상에 직접 작성하는 방법이다. CSS와 몇 가지 다른 점이 있다면, style 속성값에 일반 문자열이 아닌 객체가 할당되어야 하며 CSS속성명이 CamelCase로 작성되어야 한다. (background-color -> backgroundColor) 아래 예제처럼 인라인에 바로 작성할 수도 있고, style을 따로 변수를 선언 후 객체를 만들어 스타일에 적용할 수 있다.function App() { const s.. 2024. 8. 28. React : props에 대해 알아보자 props은 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터이다. 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있다. props는 객체로 자식 컴포넌트에서 'props.이름'으로 접근이 가능하다. 자식 컴포넌트에서 props는 읽기 전용으로 props자체를 수정할 수 없다. 부모 컴포넌트에서 props를 변경하면 해당 props를 사용하고 있던 자식 컴포넌트는 리렌더링이 된다. props 사용하기부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 데이터가 문자열일 경우는 큰따옴표("")를 이용해서 전달이 가능하고 문자열 외의 값을 전달할 때는 중괄호({})를 이용한다.부모컴포넌트 : 자식컴포넌트 :distructuring없이 props를 사용할 경우 함수에 props를 .. 2024. 8. 26. React : 컴포넌트(Component)란 ? JavaScript에서 기능을 캡슐화 시켜서 재사용이 가능한 하나의 커스텀 엘리먼트를 생성하여 웹에서 활용할 수 있도록 하는 웹 컴포넌트에 대해 공부한 적이 있다. React의 컴포넌트는 사용자 인터페이스를 구성하는 독립적이고 재사용이 가능한 React의 기본 단위이다. 임의의 데이터(props)를 입력 받은 후 정해진 출력을 시행한다. 컴포넌트 작성법컴포넌트 이름은 항상 대문자로 시작한다. (React는 소문자로 시작하는 컴포넌트를 DOM태그로 취급)PascalCase로 작성한다. 컴포넌트 사용 시에 한 개의 파일에는 가급적 하나의 컴포넌트를 넣어 사용한다.파일의 이름과 컴포넌트 이름을 동기화 시키는 것을 권장한다.src에 components 폴더를 생성한다. components에 컴포넌트 파일을 생.. 2024. 8. 26. React : 배열 렌더링을 해보자 ! React에서는 배열을 업데이트 할 때마다 새 배열을 state 설정 함수에 전달해야 한다. React에서 JavaScript 배열 메서드를 사용하여 데이터 배열을 조작할 수 있다. 메서드추가concat, [...arr] * spread연산자제거filter, slice교체map정렬배열을 복사한 이후 reverse() 및 sort()함수 사용 filter(), map(), spread연산자를 이용한 배열 데이터 필터링filter()의 경우 주어진 필터링 값이 참인 경우의 배열 요소들만으로 새로운 배열을 생성한다. map()의 경우 배열 내의 모든 요소 각각에 대하여 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다. 그리고 spread연산자의 경우 반복이 가능한(iterable) 객체에서 요소를.. 2024. 8. 22. React : useState에서 객체와 배열을 다뤄보자 React의 useState 함수의 경우 값이 변경되면 재렌더링을 해준다. 참조형의 경우에는 참조하는 주소(메모리주소)가 변경 되었을 때 값이 변경되었다고 인식하기 때문에 값을 변경한다고 해서 렌더링이 발생하지 않는다. 아래의 로직을 시행했을 때 참조하는 주소가 변경되지 않았기 때문에 버튼을 눌렀을 때 값이 변경되지 않는다.import { useState } from 'react'import './App.css'function App() { const [obj, setObj] = useState({ name: "코딩쥐", addr: "coding-ji.tistory.com" }) function changeName(){ obj.name = "coding-ji" obj.addr.. 2024. 8. 22. 이전 1 2 3 4 다음