Virtual DOM이란? Virtual DOM은 메모리에 저장되어 있는 JavaScript 객체로, 실제 DOM의 복사본입니다. 이를 사용하여 실제 DOM과의 변경사항을 효율적으로 비교하고 조작합니다. 애플리케이션의 상태가 변경될 때마다 먼저 가상 DOM이 업데이트되고, 그 후에 실제 DOM과 비교하여 변경된 부분만을 최소한의 업데이트로 반영합니다. 일반적으로 다음과 같은 과정으로 작동합니다애플리케이션의 상태가 변경되면 가상 DOM이 업데이트됩니다.가상 DOM은 이전 상태와 비교하여 변경된 부분을 찾습니다.변경된 부분만을 실제 DOM에 반영하여 화면을 업데이트합니다.이렇게 함으로써 DOM 조작이 느린 문제를 최소화하고, 빠른 렌더링을 가능하게 합니다.DOM과 Virtual DOM의 차이점1. DO..
부모 component 에 있던 state 를 자식 component 에사 사용하려면 어떻게 해야하나요? 부모 >> 자식 >> 자식 >> 자식 .... 이렇게 상위 componet에서 props를 통해 전송해주면 됩니다. 프로젝트의 크기가 작다면 상관없지만 프로젝트의 크기가 커서 일일히 하나하나 전송해야할 경우 state 공유가 힘들어지고 너무 깊이가 깊어지면 prop driling 현상이 일어나며, 비용 또한 늘어나게됩니다. 여기서 말하는 "비용"은 코드 작성, 유지보수, 디버깅, 성능 등을 포함한 개발 프로세스의 비용을 의미합니다. 큰 프로젝트에서 상태를 일일이 전달해야 한다면 코드량이 늘어나고 유지보수가 어려워질 수 있으며, 이는 개발 비용을 증가시킬 수 있습니다. 그래서 오늘은 상태관리를 위해 만..
애니메이션 만들고 싶으면 1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가 4. 원할 때 2번 탈부착 이게 끝입니다. CSS 잘쓰면 모든 애니메이션 알아서 만들 수 있습니다. 저번에 만들었던 탭의 내용이 서서히 등장하는 fade in 애니메이션을 만들어봅시다. 1. 애니메이션 동작 전 2. 애니메이션 동작 후 className 만들기 .start { opacity : 0 } .end { opacity : 1; } 애니메이션 동작 전엔 투명도가 0, 동작 후엔 투명도가 1 3. transition 추가 .start { opacity : 0 } .end { opacity : 1; transit..
Lifecycle이란? React의 컴포넌트는 생명 주기가 있습니다. 생애 주기 또는 라이프사이클(Life cycle)이라고도 많이 표현합니다. 컴포넌트는 1. 생성이 될 수도 있고 (전문용어로 mount) 2. 재렌더링이 될 수도 있고 (전문용어로 update) 3. 삭제가 될 수도 있습니다. (전문용어로 unmount) 저희가 라이프사이클에 대해서 배우는 이유는 컴포넌트 인(라이프사이클)에 간섭할 수 있기 때문입니다. 간섭이 뭐냐면 그냥 코드실행인데 컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트될 때 특정 코드를 실행할 수도 있다는 겁니다. 인생에 간섭하는 방법 "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detai..
컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데 1. class 만들어놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나 3. CSS 파일이 너무 길어져서 수정이 어렵거나 이런 경우가 있습니다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데 styled-components 라는 인기 라이브러리를 설치하여 이용하시면 됩니다. 설치방법 터미널 열어서 npm install styled-components 해주면 됩니다. import styled from 'styled-components' 그리고 사용하고 싶은 컴포넌트 맨위에 이런걸 import 해와야합니다. Detail.js 파일 위에 ▲ 위처럼 입력해서 import 해오십시오. 그..
1. 리액트 라우터 : 셋팅이랑 기본 라우팅 - 나누고 싶으면 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 - 근데 리액트는 SPA(single page aplication)로 html 파일을 하나만 사용합니다. - 그래서 React Router는1개의 html에서 새로고침 없이 필요한 부분을 렌더링 시켜 주소에 맞춰 필요한 화면을 보여줍니다. - (참고) Routing 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 1) react-router-dom 설치하려면 터미널 열어서 아래의 코드를 입력하여 설치합니다. npm install react-router-dom@6 셋팅은 index.js 파일로 가서 import { BrowserRo..
Module 이란? React를 개발하다보면 파일이 커지면서 여러 개의 파일로 나뉘게 되는데, 이 때 분리된 파일들의 이름을 모듈(module)이라고 한다. 모듈내에는 함수, 변수 등이 있습니다. 또, 다른 모듈안에 있는값을 불러오거나, 모듈 내에 있는 값들을 외부로 내보낼 수 있는데, 이때 사용하는 것이 import(불러오기), export(내보내기) 라고 합니다. import / export? 변수나 함수, 자료형을 다른 파일로 저장해둔 뒤에 불러오는 방법입니다. 1. data.js(원하는 데이터파일)을 export하고 2. App.js(불러와서 적용할파일)에 import를 하면 됩니다. 예를 들어 , data.js라는 파일이 있는데 거기 있던 변수를 App.js 에서 가져와서 쓰고 싶으면 (data..
리액트에서 이미지를 넣은 방법은 다양합니다. 그래서 React에서 이미지를 사용해야 할 때 해당 이미지가 public폴더에 있는지 src폴더에 있는지, 또는 jsx파일에서 사용하는지 css에서 사용하는지에 따라 경로 설정하는 방법이 달라 헷갈려 이미지가 깨져 제대로 나오지 않을 수 있습니다. 그래서 오늘은 각 방법별로 이미지를 넣고 경로를 설정하는 방법에 대해서 설명하고자 합니다. React에서 이미지 경로를 설정하는 방법 1. src 폴더에서 이미지를 import src 폴더 안에 이미지를 넣습니다. 그리고 src 폴더안에 있는 사진을 CSS에서 사용하고 싶으면 ./이미지경로 사용하면 됩니다. (App.css) .main-bg { height : 300px; background-image : url('..
