[React] 함수 생성

리액트에서 함수 선언

function Component(props){
	return <div>{props.hello}</div>
}

 

함수 선언문

함수 선언할 때에 가장 일반적인 방법은 아래이다.

function add(a,b) {
 	return a + b
}

 

함수 표현식

function로 시작해 }로 끝나는 부분이 함수를 정의한 부분이다. 함수 표현식에서 코드의 혼란을 방지 하기 위해 함수의 이름을 생략하는 것이 일반적이다. 

const sum = function (a,b) {
	return a + b
}

sum(10,24)

 

함수 선언문과 표현식은 호이스팅에서 차이가 있다. 함수 표현식은 호이스팅 되는 시점에 underfined로 초기화된다. 반면에 함수 선언문은 어디서든 에러없이 수행한다. 

 

화살표 함수

ES6에서 추가된 함수 생성 방식이다. 타이핑량이 적어 최근에 많이 쓰이고 있다. 

const add = (a,b) => {
	return a + b
}

const add = (a,b) => a + b

 

 

리액트 함수에서 변수 사용하기

const Hello = () => {
	return <div>Hello</div>
}

const App => () => {
	return <div>
    	<Hello />
    </div>
}

ReactDOM.render(<App />, document.getElementById("root"));

 

리액트에서 css 사용하기

style = {{ }} 안에 내용을 삽입하면 되는데 key:value 형식으로 값을 넣는다. css와 달리 각 요소는 ;가 아니라 쉼표(,)로 구분하고, 값은 따옴표("")로 묶여야 한다.

const Square = () => {
	return (
		<div
			style={{
				width: "200px", // key : value
				height: "200px",
				backgroundColor: "blue",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				color: "white",
				fontWeight: "bold"
			}}
		>
			정사각형
		</div>
	);
};

const Circle = () => {
	return <div
					 style={{
				width:"200px",
					height:"200px",
				backgroundColor:"red",
					display: "flex",
			alignItems: "center",
				justifyContent: "center",
				color: "white",
				fontWeight: "bold",
			borderRadius: "50%"
		}}
					 >원</div>;
};

const App = () => {
	return (
		<div>
			<Square />
			<Circle />
		</div>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));