IT321 props props : properties를 줄인 표현으로 컴포넌트 속성을 설정시 사용. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능 props 값은 컴포넌트 함수의 파라미터로 받아와 사용할 수 있습니다. import React from "react"; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name} ; }; export default MyComponent; import React from "react"; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name} ; }; export default MyComponent; 아래와 같이 default props를 설.. 2019. 10. 27. 모듈 내보내기, 불러오기 모듈 내보내기 export default MyComponent; 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정. 모듈 불러오기 import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return ; }; export default App; 2019. 10. 27. 클래스형 컴포넌트 컴포넌트 : 함수형, 클래스형 컴포넌트 2가지 존재 클래스형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 같다. 클래스형 컴포넌트의 경후 state 기능 및 라이프 사이클 기능과 임의 메서드를 정의 할 수 있다. 반드시 render 함수가 필요하며, 그안에서 보여주어야 할 JSX를 반환 해주어야 한다. 함수형 컴포넌트 장점 클래스형 컴포넌트보다 선언하기 편하다. 메모리 자원을 클래스형 컴포넌트에 비해 덜 사용한다. 프로젝트 완성하여 빌드 후 배포시에도 함수형컴포넌트를 사용하는 것이 파일 크기가 더 작다. (함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기 면서에 사실상 별 차이가 없다.) 단점 state와 라이프 사이클 API의 사용이 불가능 하다. (v16.8 이후 Hooks를 통해 조금.. 2019. 10. 27. JSX JSX : 자바스크립트의 확장 문법이며 XML과 매우 유사하게 생겼다. 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. function App() { return ( Hello backgroundColor import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const name = '리액트'; const style = { //background-color는 backgroundColor 카멜 표기법 backgroundColor : 'black', color: 'aqua', fontSize: '48px', //fon.. 2019. 10. 24. 이전 1 ··· 40 41 42 43 44 45 46 ··· 81 다음