useEffect 를 알아보기 이전에 rendering이라는 개념 먼저 잡고 가자렌더링이란?- 브라우저 렌더링 : html과 css리소스를 기반으로 웹페이지에 필요한 ui를 그려내는 과정- 리액트 렌더링 : 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정 여기서 DOM이란?React element 들을 HTML body에 둘 수 있도록 하는 것을 말한다. 리액트 앱의 모든 컴포넌트들이 현재 자신들이 갖고 있는 props와 state의 값을 기반으로어떻게 ui를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할지 계산하는 일련의 과정이다. 리액트 렌더링은 언제 일어나는가?-최초 렌더링-useState() 의 두번째 요소인 setter가 실행될 경우-컴포넌트의 props가 변경되는 경우-부모 ..

본격적으로 리액트 프로젝트를 생성해보자 ⦁ 시작 전 필요한 것① node가 깔려 있어야 한다. node -v버전이 잘 출력되면 node 준비완료없다면 설치해야 함 ② npx 커맨드 작동되는지 확인npx 리액트 설치npx create-react-app 프로젝트명리액트 실행npm start package.json 파일 "scripts" 에서 명령어를 확인할 수 있다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, prop-types(프롭타입스)라이브러리 설치프롭타입을 검사해주는 라..

Prop Types프롭타입 검사해주는 기능 - 스크립트 추가 - 프롭타입 지정Btn.propTypes = { text: PropTypes.string.isRequired, fontSize: PropTypes.number,} 타입이 맞지 않으면 error - 전체 코드

컴포넌트 render 원리첫번째 버튼(저장)onClick 이 되면 value가 재설정됨value가 바뀔 때(상태가 바뀔 때) 다시 App이 render됨 부모(App)이 state를 변경함App(컴포넌트)의 상태가 바뀌면 다시 render 되는것    ※ 하지만, 하나의 컴포넌트가 천개의 컴포넌트를 그리고 있다고 상상해봤을 때부모의 상태가 변경되었다고 모든 컴포넌트를 re-render하는 것은매우 비효율적이며 속도가 느려지는 원인이 될 수 있다. Memo를 사용하여 수정새로운 버튼만 re-renderconst MemorizedBtn = React.memo(Btn);function App() { const [value, setValue] = React.useState('저장'); const c..

리액트는 기본적으로 3000번 포트로 실행된다. package.json 파일의 scripts 부분을 수정해주면 포트 번호를 변경할 수 있다. 1. Mac 사용자 start 부분에 추가해주기 export PORT=변경할번호 && 2. Window 사용자 start 부분에 추가해주기 set PORT=변경할번호 && 참고 : [React] 포트번호 변경하는 방법 기본적으로 3000번 포트로 저장되어 있는데, 여러 프로젝트시 포트번호를 변경후 실행해야된다.packge.json 파일 수정파일의 scripts 객체에 기본적으로 ↓ 아래와 같이 되어있다.Mac & Linuxstart : 부분 velog.io

react 설치 이전 Node.js , npm , npx 가 설치되어 있어야 합니다. ffoorreeuunn.tistory.com/199 [ Node.js ] Node.js 설치하기 & npm 설치하기 & npx 설치하기 1. Node.js 설치하기 nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 링크로 들어가줍니다. 현재 가장 최신의 LTS 버전은 14.15.5 입니다. LTS란 ffoorreeuunn.tistory.com 1. create-react-app 로 리액트 설치 프로젝트 폴더 생성 후에 vscode로 열어서 터미널에..

데이터를 전역으로 관리하자 ContextAPI or Redux API문서 https://ko.reactjs.org/docs/context.html React를 하다보면 여러 컴포넌트를 거쳐서 자료를 전달해야 하거나, 동시에 같은 자료를 사용해야 하는 경우가 생깁니다. Context는 리액트 컴포넌트 간에 어떠한 값을 공유 할 수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용합니다. Props로만 데이터를 전달하는 것은 한계가 있다. 리액트 에서는 일반적으로 컴포넌트에게 데이터를 전달해 주어야 할 때 Props를 통해 전달합니다. 그런데, 이 컴포넌트의 형태가 복잡하다면 어떻게 될까요?

SPA란? (single page application) 하나의 페이지로 만들어진 어플리케이션을 의미합니다. SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리합니다. 브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리합니다. 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. SPA의 단점 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됩니다. 브라우저에서 렌더링이 완료되기 까지 비어있는 화면이 나오게 됩니다. 그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요) 라우팅이란? 브라우저의 주소상태에 따라 다양한 화면을 보여주도록 처리하는 것을..