728x90 반응형 인강\개인공부/React 강의6 [React] 리액트 기본 규칙, JSX 기본 규칙 😎 JSX 규칙 : javascript + XML JSX 는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법 얼핏보면 HTML 같지만, 실제로는 자바스크립트 😎 규칙 1. 태그는 반드시 닫아줘야 한다. 2. 최상단에서는 반드시 div 로 감싸주어야 한다. ( Fragment 사용 , 상황에따라 ) 3. JSX 안에서 자바스크립트 값을 사용하고 싶을때는 {}를 사용한다. 변수값 출력예시 참고 -> { name } 4. 조건부 렌더링을 하고싶으면 &&연산자나 삼항연산자를 사용한다. 5. 인라인 스타일링은 항상 객체형식으로 작성한다. 6. 별도의 스타일파일을 만들었으면 class 대신 className 을 사용한다. 7. 주석은 {/* */}을 사용해 작성한다. 2021. 11. 23. [React] 컴포넌트란? 함수형/클래스형 😎 컴포넌트 컴포넌트는 UI 를 구성하는 조각(piece)에 해당되며, 독립적으로 분리되어 재사용을 됨을 목적으로 사용됩니다. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리합니다. (예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트) 리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다. 또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 이러한 컴포넌트들이 유기적으로 잘 연결되고 동작되어야 훨씬 효율적인 앱이 될 수 있다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 어떠한 값을 컴포넌트에 전달해 줘야 할때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없다. state는 컴포넌.. 2021. 11. 23. [React] 컴포넌트 구조 - JSX영역/함수영역/Fragment 사용법 React를 구성하는 중요 파일 react로 프로젝트 구축을 할때 중요한 3개의 파일에 대해 알려드리겠습니다. 리액트는 컴포넌트 구조*로 이루어져있습니다. 컴포넌트 타입에는 함수형과 클래스형이 있습니다. 오늘 설명드릴 내용은 '함수형'을 통한 예제입니다. 😎 컴포넌트란? UI를 독립적이고 재사용 가능하도록 나눈 조각, 기능을 단위별로 캡슐화 한 단위를 말합니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document... 2021. 11. 22. [React] 프로젝트 생성 : CRA(Create-React-App) 😎 CRA(Create-React-App) : 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 https://create-react-app.dev/docs/getting-started React 시작할때 node js 설치가 필수! vs code에서 터미널을 열어준다. vscode - 터미널 - 새터미널 ctrl + ~ : 터미널 열기 1. nodejs 다운 2. npx create-react-app 프로젝트명 3. cd 프로젝트명 4. npm start =>3000번 포트로 react 서버 온 😎 CRA 명령어 Create React App을 사용해 스캐폴딩 된 프로젝트는 다음의 4가지 명령어를 제공합니다. start → React 프로젝트 개발 서버를 시작합니다. build →.. 2021. 11. 18. [React] 기초 - 바벨/웹팩 이란? CDN을 넣어서 React 구조 만들기 실제 프로젝트를 진행할때, cdn을 넣지않고 react create 해서 사용한다. 😎 create-react-app 이란? react를 활용해 개발을 하기 위한 필수 모듈인 react, react-dom, react-scripts 외부 모듈 webpack, babel 기본 구조를 알기위해 CDN을 넣어 구조 생성 React CDN => https://ko.reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper 바벨 CDN => https://babeljs.io/docs/en/babel-standalone CDN 을 헤더 안에 붙여넣어주면 된다. - 예제 화면에 보이는 영역 -> el이라는 태그를 dom에 끼워넣는다 라고 생각하면 된다. 😎 바벨 최신 ES6버전을 .. 2021. 11. 18. [React] 실전 리액트 들어가기 전 , 기본 javascript 문법 es6(ecmascript) 😎리액트란? React 는 UI 를 구현하는 JavaScript 라이브러리 웹 앱(Web App) 또는 네이티브 앱(Native App) 유지보수를 쉽게 , DOM 관리 성능최적화 쉽게 컴포넌트에 집중 대부분 공식 라이브러리가 없음 (높은 자유도) 자바스크립트 친화적 es6 기반로 배우기가 쉽다 😎react 진도 리액트에 필요한 자바스크립트 리액트 작성법 ( state , props ) hooks - useState / useRef / useEffect 스타일 :sass , styeld-component 리액트에서 ajax 요청방법 ( axios / Fetch ) 성능관련 : useMemo / useCallback 상태분리 useReducer Single Page Application: spa -.. 2021. 11. 15. 이전 1 다음 728x90 반응형