Frontend (28) 썸네일형 리스트형 [React] State 생활코딩 : 리액트편을 보고 작성된 게시글 입니다. Prop & State Props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것(사용자가 컴포넌트를 조작하게 해주는 것) State : Props의 값에 따라 내부 구현에 필요한 데이터들(컴포넌트 내부적으로 사용되는 것들, 사용자는 알아서는 안됨 + 딱히 알 필요도..) 사용자들에게 Prop의 값을 알려주지 않을 수 있게됨 외부에서 알지 않아도 되는 정보를 철저하게 은닉함 Constructor(prop) Component가 실행될 때, render()보다 먼저 실행되어서 state값을 초기화 시켜주는 코드 가장 먼저 실행되어 초기화를 담당하는 함수 1개의 값 전달하기 (변수 이용) import React, { Component } from 'rea.. [React] Component 생활코딩 리액트 편을 보고 작성된 게시글입니다. * public directory create react app에서 npm run start시 파일을 찾는 다큐먼트 root 다음과 같은 웹을 만든다고 하면, REACT 를 사용했을 때 REACT를 사용하지 않을 때 여러 줄을 하나의 줄로서 표현하여 간결해지며 유지보수가 좋아짐 그럼 실제로 오른쪽과 같은 웹을 3가지의 태그를 생성하여 오른쪽으로 변경해도 똑같은 기능을 하도록 만들어보자 Component만들기 주의! 1. 컴포넌트의 이름 첫글자는 대문자 2 . 컴포넌트는 항상 하나의 최상위 태그로 시작해야함 1 ) App.js 파일에 원하는 컴포넌트 이름으로 컴포넌트를 만들어줌 class 컴포넌트명 extends Component{ render(){ retu.. [React]기초용어 + build 생활코딩: 리액트를 보고 작성된 게시글입니다. 구성요소 OPEN FOLDER를 이용해서 개발환경 폴더를 VS Code에 불러온 모습 public folder index.html npm run start시 연결되는 local host화면 code React로 만들어낸 사용자 설정 tag (a.k.a Component )들이 위치하는 장소 id는 root가 기본이지만 수정이 가능하다. src(소스) folder 개발 작업시 대부분의 작업물(코드)들은 이 폴더에 생성하게됨 index.js 'root'라는 id의 값을 변경하려면 index.js에서도 변경해주어야 함! App.js *주의 function type을 class type으로 변경 시켜 줄 것! import React from 'react'; func.. [React] 개발환경 만들기 생활코딩 : 리액트 편을 보고 작성한 게시글입니다. React사용의 장점 Component를 이용한... 가독성 재사용성 유지보수 *Component : react를 이용한 사용자 정의 tag 기본환경 만들기 1. node js 설치 nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치가 되었는지 확인 Terminal npm -v 2. Create React App설치 sudo npm install -g create-react-app 설치 완료 확인 create-react-app -V 3. 작업환경 설정 1_원하는 곳에 폴더 하나 만들기 2_ //개발환경으로 만들.. 이전 1 2 3 4 다음
