본문 바로가기

Today I Learned

(6)
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 - 배경지식] 브라우저에서 URL을 입력하게되면 이러한 순서로 진행이 됩니다. 먼저 브라우저가 서버에게 HTML 파일을 요청합니다. (request) 파일을 서버에게 받아서 로딩을 합니다. (loading) 파일을 한줄씩 읽어 DOM 요소로 변환하는 과정을 scripting 이라고 합니다. (scripting) DOM 요소로 변환하고, CSS 요소를 CSSOM으로 변환합니다. (scripting) 변환한 것을 window에 표기하기 위해 Rendering Tree를 만듭니다. (rendering) Render Tree의 각 요소들이 어떤 위치에 어떤 크기로 표기되는지 계산을 합니다 (layout) 화면에 요소들을 그립니다. (painting) 출처 블로그 : https://velog.io/@moonshadow/ IP ..
변수는 무엇이고, 왜 필요할까? [Today I Learned - JS] 여러 날에 걸쳐 공부한 걸 한번에 정리해서 글이 많이 길다... 변수 예시 var a = 10; 변수를 알아보기에 앞서, 컴퓨터는 어떻게 메모리에 값을 저장하고 계산하는가? 예를 들어 10 + 20 = 30 이라는 식을 계산하고 저장하려면? 👉컴퓨터는 CPU 를 사용해 연산하고, 메모리(memory)를 사용해 데이터를 기억한다. 01. 메모리(Memory)란? => 데이터를 저장할 수 있는 메모리 셀의 집합체 1. 메모리 셀 1개는 1바이트 각 셀은 고유의 메모리 주소를 갖는다. 메모리 주소 : 메모리 공간의 위치를 의미 2. 컴퓨터는 즉, 1바이트 단위로 데이터를 저장하거나 읽어들인다. 3. 컴퓨터는 모든 데이터를 2진수로 처리 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상)..
리액트를 사용하는 이유 [Today I Learned - React] 리액트를 사용하는 이유?! 리액트를 사용하면 좋은 이유 01. 웹을 APP 처럼 사용할 수 있음 모바일 앱으로 발행이 쉬움 02. 이벤트 업데이트 관리가 쉬움 JS 이벤트 업데이트 방식 JS 로 DOM 에 접근하여 이벤트를 하나하나 핸들링 하려면, 프로젝트 사이즈에 따라 관리하기가 어려워 질 수 있음 이벤트가 많아지면, DOM 이 다양해지고, 업데이트 규칙도 복잡하게 됨 React 이벤트 업데이트 방식 어떠한 상태가 바뀌었을 때 그 상태에 따라 아예 리랜더링 되도록 설계가 되어있음 아예 리랜더링 하면 속도가 느려지지 않나? => Virtual DOM 으로 해결!! 어떻게 업데이트를 할 지에 대한 고민이 필요 없음 Virtual DOM : 가상의 DOM 메모리에 가상을 존재하는 DOM == JS 객체와 같..