KodeVvon's World

React에서 div, svg 값 가져오기 리액트는 input이나 textarea, select같은 태그 요소에서 target이라는 속성(attribute)을 지원해준다. 이를 이용해 target.value을 사용하면 원하는 값을 얻을 수 있다. 제어 컴포넌트를 만들기 위해 사용하는 태그들에게 지원해주는 기능인 것이다. 그러나 div와 같은 다른 요소에서는 value를 지원하지 않는다. div같은 것은 일명 '비제어 컴포넌트'를 만드는 것이기 때문이다. 때문에 이런 태그들은 defaultValue로 접근할 수 있다. 그렇지만 value/defaultValue가 아닌 다른 이름으로 가져오는 방법도 알아보고 싶었다. div에서 값 가져오기 결론적으로 말하면 div에 아래 리엑트가 지원하는 속성..

React router ! 6버전 기준으로 정리 리액트 라우터 6 설치 yarn add react-router-dom@6 Link, useNavigate 리엑트 라우터를 이용해 페이지 이동 방법에는 2가지가 있다 Link 사용 useNavigate Hook 사용(옛날의 history) 두 기능의 차이점과 활용 방법에 대해 조금 더 알아보자 Link Link 컴포넌트를 사용해 라우터에서 설정한 경로로 이동 Link 컴포넌트는 DOM 에서 a 태그로 변환됨 태그와 같은 개념이나, 리액트 프로젝트 내에서 페이지를 전환한다는 것이 차이점 ( 는 외부 프로젝트 링크로 연결시키는 목적으로 사용 ) 클릭 시 바로 이동하는 로직 구현 시에 유용 ex) 제품 목록 -> 제품 상세 페이지로 이동 시 import { Lin..

react useReducer 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 위한 hook useState를 이용해 상태변화 시키는 것이 많아지면 너무 무거워지는 문제가 있다 상태변화를 처리하는 함수의 로직이 길어지는 것은 좋지 않다 useReducer를 사용하면 컴포넌트로부터 상태변화 로직을 따로 분리시킬 수 있다 useReducer를 사용해 컴포넌트로부터 분리시키고, switch case로 관리하자 사용법 비구조화 할당으로 사용 useState처럼 [state,setState]에 있는 것 반환 상태 상태 변화시키는 함수 [관리할 상태, dispatch] = useReducer(reducer, 상태의 초기값) reducer함수를 컴포넌트를 벗어난 영역에서 만들어 사용 인자로 state,action 받고..

https://fontawesome.com/icons font awesome 은 svg 아이콘을 사용할 수 있도록 해주는 곳이다 제공되는 아이콘이 글자처럼 쉽게 크기 조절, 색 변경 등이 가능하기 때문에 유용하다 아이콘 사이즈 조절은 font-size, 색상 변경은 color속성을 사용하면 된다 :) html에 cdn으로 넣어서 적용하는 방법도 있고, npm으로 설치도 가능하다. 웹폰트 + CSS스타일로 적용하거나, svg + Javascript쪽으로 적용할 수 있다. 간단히 두 유형의 차이점을 정리하자면 1. 웹폰트 + CSS스타일 - html, css를 이용해 간단히 추가/수정이 가능 - 아이콘을 유니코드 값으로 참조하는 방식 - 일부 고급 기능(?) 이용에 제약이 있다 - 자바스크립트 없이 손쉽게,..