고급컴퓨터현장실습 대비 2) 리액트

함수형 컴포넌트(상)와 클래스형 컴포넌트(하) 차이

import React from 'react';
import './App.css';

function App() {
	const name = '리액트';
    return <div className = "react"> {name} </div>;
}

export default App;
------------------------------------------------------------
import React, {Component} from 'react';

class App extends Component {
	render() {
    	const name 'react';
        return <div className = "react"> {name}</div>;
    }
}

export default App;

1) 클래스의 경우, state 기능 및 라이프사이클(lifecycle) 기능을 사용할 수 있으며, 임의 메서드를 쓸 수 있다 한다(함수형은 불가).

2) 함수형의 경우, 클래스형보다 선언하기 편함 & 메모리자원도 덜 먹음

그러나 state와 라이프사이클 API사용이 불가.

import React from 'react';

const MyComponent = () => {
	return <div>새로운 컴포넌트</div>;
}
export default MyComponent

위의 컴포넌트를 작성했다. function 대신 ()=>{}를 사용.

function()을 사용시엔, 자신이 종속된 객체를 this로 가리키고, () =>는 자신이 종속된 인스턴스를 가리킨다.

function BlackDog () {  
	this.name = '흰둥이';  
    return {    
    	name : '검둥이',    
        bark : function () {      
        	console.log(this.name + ': 멍멍');
        }  
    }
} 

const Black = new BlackDog();
Black.bark(); //검둥이: 멍멍!

function WhiteDog () {  
	this.name = '흰둥이'  
    return {    
    	name : '검둥이',    
        bark : () => {      
        	console.log(this.name + ': 멍멍');    
        }  
    }
} 

const whitek = new WhiteDog(); 
white.bark(); //흰둥이 : 멍멍!

function YellowDog () {  
	var name = '누렁이';  
    return {    
    	name : '검둥이',    
        bark : function () {      
        	console.log(this.name + ': 멍멍'); //검둥이      
            console.log(name + ': 멍멍'); //누렁이    
        }  
    }
}

YellowDog().bark()

예시.

 

이제 이 모듈을 내보내거나 불러오고자 하면

export default MyComponent;
---------------------------------
import MyComponent from './MyComponent';

const App()=> {
	return <MyComponent />;
};

export default App;

---

props : properties를 줄인 표현으로, 컴포넌트 설정에 쓰는 요소. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정이 가능.

위에서 작성한 MyComponent를 예로 들어보면,

const MyComponent = props => {
	return <div> 제 이름은 {props.name} </div>;
} 

MyComponent.defaultProps = {
	name = '기본이름'
}
----------------------
const App = () => {
	return <MyComponent name = "React" />;
};

를 통해, App의 것이 MyComponent의 name에 React를 집어넣으면,

MyComponent는 props 설정을 통해 그 name에 받아온 값을 넣음.

혹은 defaultProps를 통해, 기본 props 값을 넣어줄 수도 있다.

 

이 props중 하나로, 리액트 컴포넌트 사용시 컴포넌트 태그 사이의 내용을 보여주는 children이 존재.

const MyApp() => {
	return <MyComponent>리액트</MyComponent>;
};
------------------------------------------

const MyComponent = props => {
    return (
      <div>
        안녕하세요, 제 이름은 {name} 입니다. <br />
        children 값은 {children}
        입니다.
      </div>
    );
  }
}

MyComponent.defaultProps = {
	name: '기본 이름'
}

과 같이 진행시, 

'안녕하세요 제 이름은 기본이름 입니다. children값은 리액트입니다'가 출력된다.

{children}은, <MyComponent> 태그 사이에 작성한 리액트란 문자열을 MyComponent에서 보여주는 것.