공부혜옹

Each child in an array should have a unique “key” prop. react 개발을 하다보면 한번씩 해당 경고를 마주한적이 있을것이다. 왜 배열을 사용할때 혹은 그 외에 상황에서 항상 key를 넣지 않았다고 경고 하는걸까? key의 역할이 뭘까? key를 넣지 않으면? virtualDOM과 DOM 비교과정에서 노드의 자식을 재귀적으로 처리할때 비효율적으로 처리된다 어떤말인지 모르겠다면 하단 포스팅의 Diffing Algorithm부분을 간단히 읽어보면 이해가 갈것이다 [React] React에서 DOM 렌더링 하는 방법 간단한 예시로 list에서 요소를 맨 마지막이 아닌 맨 앞에 삽입할 경우 새로운 요소를 삽입하고 끝!이 아닌 새로운 요소의 종속트리는 그대로 유지하되 다..

요약 실제로 DOM을 변경하지 않고 Virtual DOM을 사용한다 Virtual DOM에서 변경사항을 반영하고 실제 DOM과 비교하여 바뀐 부분을 모아 DOM에 전달하여 단 한번의 리렌더링만 일어나도록 한다 (Batch Upadate) 이러한 프로세스를 Reconciliation이라고 한다 💡 DOM이란? DOM은 document object model의 약자로 HTML, XML과 같은 문서구조를 프로그래밍 언어로 연결해주는 api이다. 트리구조로 표현된다 렌더링 과정 업데이트한 전체 UI를 Virtual DOM에 적용한다 실제 DOM과 생성된 Virtual DOM을 Diffing Algorithm을 이용해 비교한다 ReactDOM.render()가 React element를 container DOM에..

React 사용하면서 setState를 실행하고 값이 잘 바뀌었는지 확인하기위해 바로 밑줄에 console.log(state) 해본 경험이 있을것이다. 이때 console.log는 새로 입력해준값이 아닌 이전의 값을 출력한다. 대체 왜일까? const [state, setState] = useState(0); const incrementState = () => { setState(state + 1); setState(state + 1); setState(state + 1); setState(state + 1); console.log(state); } //예상 출력 // 4 // --- //실제 출력 // 0 결론부터 말하자면 setState는 비동기로 동작하기 때문이다 setState가 비동기로 동작하는..

Unity 사용버전 - 2021.3.3f1 - 2022.1.2f1 1. Unity WebGL Build 설정 compression format을 지정해줄경우 react rendering시에 error를 발생시킨다 webGL render시에 unity template를 없애고싶다면 해당 설정에서 선택해주면 된다 2. Build후 나온 결과물 확인 Build: build 결과물이 담긴 폴더로 loader, framework, data, code file들이 담겨있다 index.html: build 결과물을 불러오는 코드가 담긴 html 파일 해당 파일을 react project내 public 폴더 안 index.html에 덮어 씌울경우 별다른 설정없이 webGL빌드를 불러와 웹에 띄울 수 있다. 클라이언트 ..

1. React app생성하기(터미널) $ npx create-react-app my-app 이때 my-app은 자신이 원하는 앱 이름을 입력해준다. 2. my-app으로 directory 이동하기 $ cd my-app 3. start 스크립트 실행 $ npm start 4. Production build 생성하기 $ npm run build 5. Serve 설치하기 $ npm install -g serve 개인적으로 참고한 강의에선 -g 은 글로벌 옵션이기 때문에 설치한 컴퓨터 모든곳에서 사용가능하고 super user여야 글로벌 명령어를 설치할 수 있기 때문에 sudo를 앞에 붙인다고 설명하셨으나, 본인은 sudo를 붙일때 오히려 Command Not Found 에러가 떠서 sudo를 제외하고 실행했..

React란? : 화면을 만들기 위한 자바스크립트 라이브러리 -> 웹페이지를 쉽게 만들 수 있게 도와주는 녀석! 라이브러리란? : 자주쓰는 기능들을 모아놓은 것 React의 장점 : 1. Virtual DOM을 사용해 빠른 업데이트와 렌더링 속도 최근의 웹페이지들은 사용자들과 상호작용이 굉장히 많이 이루어진다. 버튼을 클릭하거나 누를때, 입력을 할때 등과 같은 상호작용으로 인해 페이지에 업데이트가 수시로 이루어지게 되는데 이때 웹페이지 전체를 업데이트하는 것은 성능면에서 굉장히 비용이 많이 발생하는, 비효율적인 작업이다. 이러한 부분을 React에서는 실제DOM(위 그림에선 Browser DOM)을 수정하는 것이 아닌, Virtual DOM을 사용하여 수정하여 실제DOM에서는 수정이 필요했던 최소한의 부..