728x90 react21 state state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고 컴포넌트 자신은 해당 props를 읽기 전용으로 만 사용할 수 있다. props의 값을 바꿀려면 부모 컴포넌트에서 바꾸어야 한다. 리엑트에는 (1). 클래스형 컴포넌트가 지니고 있는 state, (2).함수형 컴포넌트가 지니고 있는 useState를 통해 사용하는 state 총 두개가 있다. Class형 컴포넌트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 import React, {Component} from 'r.. 2021. 6. 20. Component - intro, props 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어 지면 이에 맞추어 UI를 만들로 라이프 사이클 API를 이용해 컴포넌트가 화면에 나타날때, 사라질때, 변화가 일어날때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다. 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나뉘어져 있다. 이 둘의 차이점은 클래스형컴포넌트는 state 기능, 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //함수형 컴포넌트 function App() { const name = "react" return ( {name} ); } //클래스형 컴포넌트 import {.. 2021. 6. 19. JSX 1 2 3 4 5 6 7 8 9 10 function App() { return ( Hello react ); } export default App; cs 위 코드는 APP이라는 컴포넌트를 생성한다. function 키워드를 사용해 만든 커포넌트를 함수형 컴포넌트 라고 하며 이를 렌더링 하면 함수에서 반환하고 있는 내용을 나타낸다. 위 코드에서 HTML처럼 생긴 것을 JSX라 한다. JSX는 js의 확장 문법이며 이를 사용해 작성된 코드는 브라우저 에서 실행되기 전에 코드 번들링 과정에서 바벨을 사용해 일반 js형태로 변환 된다. 1 2 3 4 //위 코드를 변환하면 다음과 같이 된다 function App(){ return React.createElement("div", null, "Hello", Re.. 2021. 6. 19. 번들러(bundler) 초기화가 완료된 리엑트의 src/App.js는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; Colored by Color Scripter cs 위 코드에서 import를 하는 부분은 원래 브라우저에는 없던 기능이다. 따라서 브라우저는 이런 기능을 사용하기 위해서 웹팩, Rarcel등의 번들러를 사용한다. 번들러를 사용하면 import로 불러온 모듈을.. 2021. 6. 19. 이전 1 2 3 4 5 6 다음 728x90