분류 전체보기93 react hook - useRef useRef state와 다르게 값이 변경되어도 렌더링 되지 않는다. 컴포넌트가 렌더링 되어도 값이 유지된다. 활용 방법 저장공간으로 사용된다. DOM 요소에 접근할 수 있다. DOM 요소에 접근하는 방법 useRef를 사용하여 Ref 객체를 만든다. 접근하려는 DOM 요소에 ref 속성을 추가하여 설정한다. import React, { useEffect, useRef } from 'react' //import export default function App() { const inputRef = useRef(null); //useRef 선언 //화면이 렌더링 될 때 할 작업 useEffect(() => { inputRef.current.focus(); }, []); return ( ) } ref 객체의.. 2024. 1. 25. react hook useEffect 와 의존성 배열 useEffect react 가 렌더링 될 때마다 실행된다는 특징이 있다. 처음 렌더링 될 때(마운트) 특정 값이 변경될 때(업데이트) 삭제될 때 (언마운트) 또한, 어떤 props/state가 변경될 때 실행할지를 정할 수 있는데, 이때 의존성 배열을 사용한다. 의존성 배열 useEffect를 실행할 값을 지정하는 배열이다. 1. 의존성 배열을 선언하지 않은 경우 아래의 코드는 어떤 state 값이 변경되는지 상관없이 useEffect 가 실행된다. const [num, setNum] = useState(0); const [color, setColor] = useState(''); useEffect(() => { console.log('실행'); }); 2. 의존성 배열을 빈 값으로 지정했을 경우 처음.. 2024. 1. 24. 불변성의 개념과 불변성이 중요한 이유 중요 키워드 불변성 원시타입 참조타입 불변성이 중요한 이유 리액트에서 불변성이라는 개념은 굉장히 중요하다. 렌더링과 밀접한 관계가 있기 때문이다. 리액트는 어떠한 state 가 있을 때 이 값이 변경됐는지 아니면 이전과 같은지에 따라서 렌더링을 할지 말지를 결정한다. 이때, 변경됐는지 판단하는 값은 주소값을 의미한다. (얕은 비교 수행) 그렇기 때문에 불변성을 지키는 것이 중요하다고 할 수 있다. 불변성이란? 데이터 변경 시 기존에 생성된 원본 데이터를 변경시키지 않고, 새로운 원본을 만드는 것을 말한다. 데이터 타입에서 원시타입과 참조타입이 있을 때, 원시타입은 불변성 지키고, 참조타입은 불변성을 지키지 않는다고 할 수 있다. 원시타입과 참조타입 원시타입 : Boolean, String, Number,.. 2024. 1. 24. crypto.randomUUID 적용 고유한 값인 id 는 절대 같은 값이 들어가서는 안된다. 고유한 값을 가지고 리액트가 어떤 요소가 변경됐는지 확인하기 때문이다. 이번에 todo list 개발 후 코드리뷰를 받았던 내용 중 id 값에 crypto.randomUUID 를 적용하였다. 기존에는 id 값으로 처음엔 0 을 주고 그 이후에는 데이터의 마지막 배열의 id 값을 가져와서 +1 하는 식으로 하였다. [수정 전] export default function AddTodo() { const [title, setTitle] = useState(''); const [contents, setContents] = useState(''); const [id, setId] = useState(0); //수정 전 const [data, setData].. 2024. 1. 23. react를 활용한 todo list - 개인 과제 프로젝트 📢 프로젝트 소개 프로젝트 명 : react를 활용한 나만의 todo list 만들기 프로젝트 일정 : 2024.01.22 - 2024.01.23 (2일) 깃 허브 링크 : https://github.com/jigico/todo-list 배포 링크 : https://todo-list-six-chi-85.vercel.app/ ✏️ 프로젝트 설명 react props와 useState를 활용하여 나만의 todo list 구현 💻 프로젝트 구현 기능 todo list 항목 추가/삭제 기능 추가의 경우 빈칸으로 입력하는지 유효성 검사 todo list 항목 완료/취소 기능 todo의 상태가 true 일 경우 취소버튼, false 일 경우 완료 버튼으로 조건부 렌더링 todo 항목에 맞는 리스트에 분리하여 노출 .. 2024. 1. 23. props props란? 부모 컴포넌트에서 자식 컴포넌트의 방향으로만 값을 전달할 수 있다. 자식 컴포넌트는 받은 props를 변경할 수 없다. Object의 형태로 값이 전달된다. props를 설정하는 방법 1. 부모 컴포넌트에서 자식 컴포넌트로 props를 설정하는 방법 import React from 'react'; function Son(props){ console.log(props); return 나는 {props.grandName} {props.name}의 자식 컴포넌트에오 } function Parent(props){ console.log(props) const name = '흥흥'; const grandName = props.grandName; return } function Grand(){ cons.. 2024. 1. 22. react 프로젝트 배포 - Vercel 과제 기능 작업을 완료한 후 vercel 에 배포를 해보기로 했다. 먼저 회원가입을 진행한다. 상업적인 용도가 아니여서 지금은 Hobby 로 가입했다. 회원가입 후 Overview - Add New - project 를 누른다. 나는 gitHub으로 배포해야 하기 때문에 Add GitHub Account 를 누르고 연결할 깃 계정을 선택한다. 계정을 선택한 후 어떤 프로젝트를 선택할지에 대해서 나오는데 지금은 배포할 프로젝트가 1개 뿐이라서 선택한 레포지토리만 가져오도록 했다. 배포 설정 Project Name : 원하는 이름을 기재한다. Framework Preset : 프로젝트를 빌드/배포 하는데 사용할 프레임워크를 선택한다. (기본적으로 잘 선택되어 있어서 변경하지 않았다) Root Director.. 2024. 1. 22. [react] export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 에러 상황 npm install react-router-dom 명령어로 설치 후 Switch를 사용하려는데 계속 에러가 발생했다. 리액트 강의를 보면서 실습을 진행하고 있었는데 강의는 에러가 없었다. 아래 이미지처럼 에러가 나서 검색을 해보았다. 검색해 보니 react-router-dom의 버전이 6으로 올라가면서 Switch를 지원하지 않는다는 내용을 찾을 수 있었다. 내가 사용하고 있는 버전이 몇인지 package-lock.json 에서 확인해 보니 6.21.3 버전을 사용 중인걸 확인할 수 있었다. 해결 방법 공식 문서 :https://reactrouter.com/en/6.21.3/components/routes 수정한 부분 Switch -> Routes 변경 Route에 element 추가 [에러.. 2024. 1. 22. 이전 1 ··· 6 7 8 9 10 11 12 다음
