[DEV] App Dev ∕ Web Front/Framework ∕ React 검색 결과
10 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ React

[React] 컴포넌트간 데이터 전달 : Props와 State 실습

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법 - 하위컴포넌트의 props 객체 사용 // 상위 컴포넌트 import React from 'react'; import Hello from '.Hello'; // 자식 컴포넌트 injection function App() { return ( // name 이라는 props 전달 ); } export default App; // 하위 컴포넌트 (함수형일 경우, props 객체 Input이 존재) import React from 'react'; const Hello = (props) => { return { ... {props.name} ... } } export default Hello; - 하위 컴포넌트는 기본적으로 props 객체(상위 컴포넌트에..

2021. 7. 1. 17:04
[DEV] App Dev ∕ Web Front/Framework ∕ React

[React] 기초 개념

JSX란? - React 컴포넌트 상에서, Template을 정의할 때 사용하는 문법 - HTML 같이 생겼으나, XML 형태로 작성되며, 실제로는 JavaScript이다. - Babel이 JSX를 Javascript로 내부적으로 변환해준다. import React from 'react'; import Hello frow './Hello'; const App = () => { return ( ); } - JSX 문법상 Self Closing 태그이든지, 쌍으로된 태그이든지 항상 닫는 태그를 사용하여야 한다. 컴포넌트 내 Logic 데이터를 템플릿에 반영하는 문법 : { 변수명 } (JSX 안에 자바스크립트 값 사용하는 방법) - JSX 상에서 { 변수명 } 형태로 넣어준다. ... function App..

2021. 7. 1. 16:48
[DEV] App Dev ∕ Web Front/Framework ∕ React

[React] 크롬 확장 프로그램 및 VSCode 필수 extension

React 개발시 도움이 되는 확장 프로그램 크롬확장프로그램 - React Developer Tool : React로 만든 페이지의 경우, React 전용 개발자도구를 사용할 수 있다. 공용 VS extension Extension명 설명 Auto Close Tag HTML 코드의 태그를 자동으로 닫아줌 자동 Bracket Pair Colorizer 괄호 색을 표시하여, 메소드 범위 파악 용이하게 도와줌 자동 Prettier 또는 Beautify 코드의 가독성을 도와주는 익스텐션, 문자열을 사용할 때 '을 쓸지, "을 쓸지 결정, 또는 세미콜론을 코드뒤에 붙일지, 들여쓰기는 얼마나 할지 Root 폴더에 .prettierrc 파일 생성 필요 ESLint 자바스크립트의 문법을 확인해주는 도구 해당 도구를 사..

2021. 7. 1. 10:08
[DEV] App Dev ∕ Web Front/Framework ∕ React

[React] 기본 프로젝트 구축

React 개발 환경 설정 # create-react-app cli Tool node 통해 설치 npm install -g create-react-app # 신규 react 프로젝트 생성 (typescript 사용) // 4.0 버전 이후 npx create-react-app [프로젝트명] --template typescript npx create-react-app test-app --template typescript // 4.0 버전 이전 npx create-react-app test-app --typescript # 해당 프로젝트 폴더 이동 cd [프로젝트 폴더 경로] cd test-app # build & 실행 npm run start // 개발 npm test // 테스트 npm run buil..

2021. 6. 30. 17:13