공부/리액트5 [리액트]컴포넌트 #컴포넌트 기능 - 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 줌 - 라이프사이클 API를 이용해 컴포넌트가 화면에서 나타날 때와 사라질 때, 변화가 일어날 때 주어진 작업들을 처리 가능하게 함 - 임의 메서들ㄹ 만들어 특별한 기능을 붙여줄 수 있음 1. 컴포넌트 - 함수 컴포넌트 - 클래스형 컴포넌트 2. 클래스형 컴포넌트 - 함수 컴포넌트와 차이점은, state 기능 및 라이프 사이클 기능을 사용 가능, 임의 메서드 정의가능 - 그러나 함수 컴포넌트는 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결됨. 즉, 완전히 클래스형 컴포넌트처럼 사용할 수 있는 것은 아니지만 다른 방식으로 비슷한 작업을 할 수 있게됨. - render 함수 필수 - 예시) class App extend.. 2022. 7. 20. [리액트]JSX 문법 1. 감싸인 요소 - 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함. 왜냐하면, virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 궂로 이루어져야 한다는 규칙이 있기 때문임. - 아래 예시에서 부모 요소에 의해 감싸여 있지 않기 때문에 오류 발생. function App() { return ( 안녕1 안녕2 ); } - 아래와 같이 수정하면 됨. function App() { return ( 안녕1 안녕2 ); } - div대신 Fragment로 감싸기(import해주기). Fragment 대신 로도 쓸 수 있음. function App() { return ( // 안녕1 안녕2 // ); } 2. 자바스크립트 표현 .. 2022. 7. 19. [리액트]기본코드 정리 1. App.js - function App()이 리턴한 값이 id가 root인 곳의 아래로 들어갔다 2. index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); - 뭔가를 화면에 그린다.-render - 안에 이라고 작성해서, App이라는 함수가 반환하는 값을, document의 id가 root인 요소의 밑에 render 하겠다. - 최상위 컴포넌트를 정의할 수 있다. 즉, App.js가 아닌.. 2022. 7. 19. [리액트]작업 환경 설정 1. node js, npm설치 - 크롬 v8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임. - 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있게 함. - node js 설치하면, node js 패키지 매니저 도구인, npm이 설치됨 2. yarn 설치 - npm을 대체할 수 있는 도구로, npm보다 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공. - ' npm install --global yarn ' 으로 설치 3. 에디터 설치 - 서브라임 텍스트, 브래킷, vs code, 아톰 등이 존재 4. git설치 5. create-react-app으로 프로젝트 생성하기 - yarn : yarn create react-app 프로젝트명 - npm : npm init react.. 2022. 7. 19. 이전 1 2 다음