반응형 front/react19 생활코딩 react (16.1-이벤트 state props 그리고 render 함수) # React-16.1. 이벤트 state props 그리고 render 함수 - event - 애플리케이션의 역동성 구성 : event, props, state 의 상호작용 1. title : WEB 에 링크추가 - 클릭시 본문(Content)에 Welcom 메시지 표시 :src\components\Subject.js {this.props.title} 2. toc 항목 클릭시 본문에 해당 내용 표시 3. 각 링크마다 이벤트 설치(다음시간) - App 컴포넌트의 state 값에 따라 content의 컴포넌트의 props를 변경하고 변경사항이 컴포넌트에 반영이 되도록 개선 3.1 state 셋팅 - mode 속성 추가 : 기본값 - welcom - 상태별 state 속성 추가 : welcom > react.. 2021. 6. 29. 생활코딩 react (15-State 소개 및 사용) # React-15.1. State 소개 - state, props - 사용자가 조작하는 부분 (props) : 유저 인터페이스(버튼, 터치스크린 등) - 구현자가 조작하는 부분 (state) : 상태 - 컴포넌트 사용 : props (사용자가 조작하는 속성), state (컴포넌트가 내부적으로 관리하는 정보) > state를 알아보며 props도 이해하자 # React-15.2. State 사용 - App > Subject : props 하드코딩 > state로 전환하여 개선하자 - 생성자(constructor)를 이용해 state 값을 정의하고 초기화한다. > 컴포넌트가 실행될때 render()를 실행하기 전에 constructor를 실행하여 컴포넌트 초기화를 담당함 constructor(props).. 2021. 6. 29. 생활코딩 react (13~14-React Developer Tools, Component 파일로 분리) #13 React - 13. React Developer Tools * chrome 플러그인으로 지원하는 react 개발자 도구 ** 영상에서 설명하는 개발자도구 접근방법 (없어짐) - reactjs.org > community > tools > Debugging > React Developer Tools - Chrome, Fierfox, standalone app 지원 ** 개선된 크롬 디버그 툴 제공 - 관련 블로그 글 : https://ko.reactjs.org/blog/2019/08/15/new-react-devtools.html > https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoie.. 2021. 6. 22. 생활코딩 react (10~12-컴포넌트 만들기) #10 React - 10. 리액트가 없다면 * 웹화면 구성시 복잡도를 관리하기 위한 react의 기능 확인 - 셈플 웹페이지 작성 (복잡도를 높히기 위해 시멘틱 테그 적용) WEB Word Wide Web! HTML CSS JavaScript HTML HTML is HyperText Markup Loanguage. WEB Word Wide Web! HTML CSS JavaScript HTML HTML is HyperText Markup Loanguage. #11.1 React - 11.1. 컴포넌트 만들기 1 * 준비 - 기본 컴포넌트 구성 // import logo from './logo.svg'; // 삭제 import './App.css'; import { Component } from 'reac.. 2021. 6. 22. 생활코딩 react (7~9-js, css 코딩 및 배포) #7 React - 7. JS 코딩하는 법 * 디랙토리 구조 ** public : 배포파일 폴더 - public\index.html (첫화면) : react 로 만든 앱을 root 에 적용하도록 구성됨 > root 영역에 적용될 개발 결과물은 src의 소스로 구성됨 ** src : 소스파일 폴더 - 진입파일 : index.js > root 테그에 App 컴포넌트를 적용한다. import App from './App'; -- ./App.js 파일 ReactDOM.render( -- react로 만든 컴포넌트 , document.getElementById('root') ); - App.js 파일 변경 : 함수방식 > 클래스방식 import logo from './logo.svg'; import './App... 2021. 6. 20. 생활코딩 react (4~6-create react app 설치, 개발환경 구축, 셈플실행) #4 React - 4. npm을 이용해서 create react app 설치 * npm 설치 (14.17.1 LTS) - https://nodejs.org/ko/ - https://nodejs.org/ko/download/ - windows portable x64 설치 : 압축해제 하고 NODE_HOME을 환경변수에 등록해서 path를 추가했다. > NODE_HOME : D:\dev\bin\node-v14.17.1-win-x64 , path : %NODE_HOME%; (지식정보사이트 : 서말 > NPM1 : npm을 다루는 기본방법) * create-react-app 설치 - 공식문서 가이드 : npx (임시로 설치해서 한번만 실행하고 지움 : 최신버전, 공간절약 장점) D:\dev\bin\node-v.. 2021. 6. 20. 이전 1 2 3 4 다음 반응형
