React22 리액트[기초] 초기 렌더링 과 조화 과정 렌더링 이란? 사용자 화면에 view를 보여주는 것을 말한다 초기 렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에만 처음에 어떻게 보일지 정하는 초기 렌더링이 필요하다 리액트에서는 초기 렌더링을 다루는 함수 render 가 있다 render 함수란? 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다 html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다 조화 과정 이란? 리액트에서 뷰를 업데이트할 .. 2022. 5. 24. 리액트 [기초] 리액트와 컴포넌트의 개념 리액트의 개념 페이스북에서 제공하는 자바스크립트 UI 라이브러리로 사용자 인터페이스를 만드는 데 사용된다 프레임워크가 아닌 오직 view 만 담당하는 라이브러리 이므로 기타 기능은 직접 구현해서 사용해야 한다 컴포넌트 기반이다 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화 함으로써 DOM처리 횟수를 최소화하고 효율적으로 진행한다 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있다 컴포넌트(component)의 개념 앱을 이루는 최소한의 단위이다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 말한다 컴포넌트를 view로 보여주는 것을 렌더링이라 하며 컴포넌트를 실제 페이지에서 렌더링 할 때는 분리된 두 가지 절차를 따른다 먼저 문자열 형태의 HTML 코드를 생성한 후 특정.. 2022. 5. 24. Concurrently 라이브러리 Concurrently는 라이브러리인데 이 라이브러리를 쓰면 프론트와 서버를 동시에 실행시킬 수 있다 ★ 터미널에 npm run dev 라고 입력하면 프론트, 서버가 동시에 실행된다. 따로 실행 하려면 ... npm run backend : 백엔드 실행 명령어 npm run start : 프론트엔드 실행 명령어 2022. 4. 7. 맥으로 npm을 사용해서 React 설치하는 방법 내가 설치한 방법은 npm을 이용해서 바로 create-react-app을 설치하는 방법으로 생활코딩에서 하는 방법을 따라 했다 공식적으로 권장하는 방법은 npx 도구를 사용하는 방법이다 npx create-react-app 1. nodejs.org 홈페이지에서 먼저 설치하기 2. 터미널에서 npm -v 를 작성했을 때 숫자가(설치한 버전) 나오면 성공적으로 설치된 것! 3. 터미널에서 npm install -g create-react-app 이라고 작성하면 실행이 되는데 만약 권한이 없을경우 Error:EACCES 가 뜨게 된다. 그럴 땐 앞에 sudo를 붙여서 sudo npm install create-react-app로 작성해준다 컴퓨터에게 create-react-app를 설치해달라고 하는 것 -g.. 2022. 4. 2. 이전 1 2 3 4 다음 728x90
