본문 바로가기

Today I Learned/React

 (4)
useRef 가 DOM 선택하는 것 외에 또 다른 용도 [Today I Learned - React] 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음 useRef 로 관리하는 변수는 값이 바뀐다고 컴포넌트가 리렌더링 되지 않음 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회할 수 있음. useRef 로 만든 변수로 관리할 수 있는 것 1. setTimeout, setInterval을 통해 만들어진 id 2. 외부 라이브러리를 사용하여 생성된 인스턴스 3. scroll 위치....!! 요기서 잠깐! 그냥 일반 변수를 안만들고 왜 굳이 useRef 로 변수를 만드느냐? 컴포넌트는 그 컴포넌트의 state나 props가 변경될 때마다 호출되는데(re-ren..
map 을 사용할 때 왜 key 설정을 해야하나? [Today I Learned - React] 설정해줘야하는 이유 각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있음 만약 설정해주지 않으면 map 을 설정한 초기 배열에서 요소를 하나 더 추가하게되면 배열의 요소가 추가되지 않고 배열의 요소들이 교체되듯이 동작한다. 즉, [a,b,c,d]라는 배열에서 [a,b,z,c,d]로 업데이트하면 DOM 에서는 c 가 z로 바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입되는 형태가 되어버림 ==> 문제는 없지만 아주 비효율적으로 동작하는 것! key 설정을 해준다면? 수정되지 않는 기존의 값은 그대로 두고, 원하는 곳에 내용을 삽입하거나 삭제함! 즉, 배열을 렌더링 할 때 key 값은 매우 중요함.
useState 객체로 사용하기(input 예시) [Today I Learned - React] input의 개수가 여러개가 되었을 때, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현할 수 있지만 => 좋은 방법이 아님! 여기 더 좋은 방법 설명 시작! 01 일단, 위와 같이 input 태그에 name 속성을 설정하고 이벤트가 발생되었을 때 이 값을 참조하도록 설정. 02 const [inputs, setInputs] = useState({ name: '', nickname: '' }); useState 에는 문자열이 아니라 객체 형태의 상태를 관리해주기 03 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inp..
리액트를 사용하는 이유 [Today I Learned - React] 리액트를 사용하는 이유?! 리액트를 사용하면 좋은 이유 01. 웹을 APP 처럼 사용할 수 있음 모바일 앱으로 발행이 쉬움 02. 이벤트 업데이트 관리가 쉬움 JS 이벤트 업데이트 방식 JS 로 DOM 에 접근하여 이벤트를 하나하나 핸들링 하려면, 프로젝트 사이즈에 따라 관리하기가 어려워 질 수 있음 이벤트가 많아지면, DOM 이 다양해지고, 업데이트 규칙도 복잡하게 됨 React 이벤트 업데이트 방식 어떠한 상태가 바뀌었을 때 그 상태에 따라 아예 리랜더링 되도록 설계가 되어있음 아예 리랜더링 하면 속도가 느려지지 않나? => Virtual DOM 으로 해결!! 어떻게 업데이트를 할 지에 대한 고민이 필요 없음 Virtual DOM : 가상의 DOM 메모리에 가상을 존재하는 DOM == JS 객체와 같..

티스토리툴바