# ReactDOM

26개의 포스트
post-thumbnail

React

바닐라 JS와 리액트 JS의 차이점을 알고 어떤 장단점이 있는지 확인해 본다.Vanilla JS의 경우 HTML → JS 순서React JS는 이와 반대로 JS에서 HTML 요소를 컨트롤 한다.❗️여기서 사용된 html 샘플 코드는 리액트의 원리를 보여주기 위한 방식으

2023년 5월 17일
·
0개의 댓글
·

[ERR] Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'. 해결하기

ReactDOM.createPotal 사용 시 해당 에러가 뜨면서 document.getElementById 를 읽지못했다.해당 에러를 수정하려면 ! 를 붙여주면 된다타입스크립트는 document.getElementById("modal-root") 가 null 일 수

2023년 4월 10일
·
0개의 댓글
·
post-thumbnail

성능최적화

리액트를 사용하면서 성능최적화에 대해 궁금해졌고 이를 위해 어떠한 Hook이 있는지 찾아봤다. 대표적으로 useMemo와 useCallback Hook이 존재했고 이에 대해 학습한 내용을 정리해본다.첫줄은 이렇게 말하고싶었다. useMemo, useCallback을 사

2023년 3월 13일
·
0개의 댓글
·
post-thumbnail

[React] react-dom 이해하기

react-dom 이해하기

2023년 2월 7일
·
0개의 댓글
·

# React Basics

React를 사용하려면 React와 ReactDOM이라는 라이브러리가 필요하다.React : UI를 만들기 위한 라이브러리ReactDOM : UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리.(실제 HTML 요소를 화면에 불러옴)참고 | react dom에 대

2023년 1월 24일
·
0개의 댓글
·
post-thumbnail

[221031] 오늘의 배움(TIL) - React

✍ 22년 10월 31일 공부한 내용 정리

2022년 10월 31일
·
0개의 댓글
·

ReactDom.render 버전 바꾸기

오랜만의 포스트이다. 프로젝트의 콘솔창에서 계속 빨간줄을 띄우던 ReactDOM.render를 수정했다 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until y

2022년 10월 31일
·
0개의 댓글
·
post-thumbnail

[React] JSX, 컴포넌트,React DOM, 중요 파일

React는 페이스북의 UI를 더 잘 만들기 위해서 페이스북에서 만든 JS UI 라이브러리로,복잡한 웹앱에서 <span style='background-color: HTML과 비슷하게 생겼으며 javascript 파일 내에서 작성할 수 있다.JSX는 원래의 J

2022년 7월 5일
·
0개의 댓글
·
post-thumbnail

React.createElement 와 ReactDOM.render

예시 코드를 보며 React.createElement 와 ReactDOM.render 에 대해 알아보려 한다.Javascriptdocument.createElement(tagName, options)=> 지정한 tagName의 HTML 요소를 만들어서 반환ReactRe

2022년 6월 14일
·
0개의 댓글
·
post-thumbnail

[TIL] 0605 | React with Redux, Next.js, TypeScript

✍🏻 0605 | React with Redux, Next.js, TypeScript ✓ 리액트가 실제로 작동하는 방식 ✓ 컴포넌트 업데이트 실행 과정 ✓ 자식 컴포넌트의 리렌더링 자세히 살펴보기

2022년 6월 5일
·
0개의 댓글
·
post-thumbnail

Day 6 - ReactJS로 영화 웹 서비스 만들기

사이트 : 노마드코더강의 : ReactJS로 영화 웹 서비스 만들기시각 : 2022.04.26◆ 완료한 강의 :'Fetch' 함수=> 외부 원격 API를 받아오기 위해 사용하는 함수. Promise 타입의 객체를 return 함.호출이 성공하면, 'response(응답

2022년 4월 26일
·
0개의 댓글
·
post-thumbnail

Day 5 - ReactJS로 영화 웹 서비스 만들기

사이트 : 노마드코더강의 : ReactJS로 영화 웹 서비스 만들기시각 : 2022.04.24◆ 완료한 강의 :Render 될 때 마다 모든 자료를 새로고침하지 않고어떤 특정 요소를 딱 한번만 실행시키고 싶을 때 쓰는 함수.첫 렌더링 시 어떤 것을 딱 한번만 실행시켜줌

2022년 4월 24일
·
0개의 댓글
·
post-thumbnail

Day 4 - ReactJS로 영화 웹 서비스 만들기

사이트 : 노마드코더강의 : ReactJS로 영화 웹 서비스 만들기시각 : 2022.04.21◆ 완료한 강의 :React App을 설치하여 기본제공 파일들을 손쉽게 수정할 수 있다.이전 강의처럼 한 파일에 일일이 함수 component를 만들 필요없이각각의 compon

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

Day 3 - ReactJS로 영화 웹 서비스 만들기

사이트 : 노마드코더강의 : ReactJS로 영화 웹 서비스 만들기시각 : 2022.04.20◆ 완료한 강의 :부모 함수 컴포넌트에서 자식 컴포넌트 속 자료를 건내받는 법재활용이 필요할 때 수고를 덜어주는 것.ex:) 버튼 여러개에 적용할 속성 작성된 함수 컴포넌트 하

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

Day 2 - ReactJS로 영화 웹 서비스 만들기

사이트 : 노마드코더강의 : ReactJS로 영화 웹 서비스 만들기시각 : 2022.04.18◆ 완료한 강의 :React.useState()사용하면 Array 한개가 생김. 담을 데이터용 변수, 담을 데이터를 처리할 함수용 변수 이렇게.두번째 항에 '함수'는 무슨 값

2022년 4월 18일
·
0개의 댓글
·

Day 1 - ReactJS로 영화 웹 서비스 만들기

사이트 : 노마드코더강의 : ReactJS로 영화 웹 서비스 만들기시각 : 2022.04.17◆ 완료한 강의 :node.js가 설치되어 있어야 함.Visual Studio 내 터미널에서 명령어를 통해 react 설치.React페이스북이 만든 오픈형 library.Jqu

2022년 4월 18일
·
0개의 댓글
·
post-thumbnail

React의 작동원리(React vs ReactDOM, 컴포넌트 vs Real DOM)

React는 유저 인터페이스를 만드는 자바스크립트 라이브러리다.React는 컴포넌트를 활용하여 효율적으로 유저 인터페이스를 만들고 업데이트한다.React는 컴포넌트와 state를 관리하는 라이브러리일뿐이다. React는 컴포넌트의 현 state와 전 state의 차이점

2022년 1월 23일
·
0개의 댓글
·
post-thumbnail

02. 리액트 기본 설정 코드의 역할

이번에는 npm create(init) react-app을 하였을 때 만들어지는 여러 리소스중 제일 중요한 파일인 index.js에 담겨져 있는 코드들을 분석하고자 한다.

2022년 1월 10일
·
0개의 댓글
·
post-thumbnail

React란?

자바스크립트때 todo list를 만든 후 모듈화를 시도한 적이 있는데, dependency error때문에 이틀동안 고생했다. 관계도를 잘못 그리는 바람에 모든 곳에서 todos를 참조하는 문제가 발생했고 스코프도 분리되지 않았다. 다시 한 번 MVC 패턴에 의거하여

2021년 12월 4일
·
0개의 댓글
·
post-thumbnail

React - 동작방식

리액트의 동작방식으로부터 성능최적화를 하는 방법까지.

2021년 11월 17일
·
1개의 댓글
·