0504TIL React

리액트

리액트는 어떠한 상태가 바뀌었을 때 상태에 따라 dom을 업데이트하는게 아니라 아예 새로 바꾸는 개념을 가지고 있다
리액트에서는 virtual DOM 을 사용해서 업데이트가 필요한 곳의 ui를 렌더링한다 그리고나서 실제 dom과 비교해 차이가 있는 곳을 찾아 패치시킨다

ui 를 어떻게 보여줄지 집중
ui를 컴포넌트로 선언한다 컴포넌트는 ui 조각이다

리액트 컴포넌트를 만들때는

import React from 'react'

를 통해 불러와야 한다
리액트 컴포넌트는 함수형태로도 작성할 수 있고 클래스 형태로도 작성할 수 있다
마지막에는

export default Hello;

Hello 라는 컴포넌트를 내보낸다는 의미로 export 를 해준다 export 를 해줘야 다른 컴포넌트에서 사용할 수 있다

jsx

jsx 는 javascript 를 확장한 문법으로 React element를 생성한다

jsx 는 사용할 때 몇가지 규칙이 있다

• 태그는 꼭 닫혀야 한다 태그를 열었으면 꼭 닫아 주어야 하고 태그와 태그 사이에 내용이 들어가지 않으면 self closing 태그로 닫아주어야 한다
• 두개 이상의 태그는 무조건 하나로 감싸져 있어야 한다 div 로 감싸주거나 Fragment(DOM에 별도의 노드를 추가하지 않고 여러 자식들을 그룹화 할 수 있는 것 <></>) 로 감싸주면 된다
• jsx 내부에 자바스크립트 변수를 보여줘야 할 때는 중괄호{}(jsx의 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있다) 를 사용한다

function App() {
	const hi = 'react';
    return (
    	<div>{hi}</div>
    );
}
export default App;

• 태그에 style 과 css 를 적용하는 방법은 HTML 과는 다르다
  먼저 인라인 스타일은 객체형태로 작성해야 하고 '-' 는 쓰지 못한다 대신 camelCase 로 바꿔서 써야한다 (background-color => backgroundColor) 단위를 따로 입력 안하면 기본단위는 px 이다 다른 단위를 사용하면 문자열로 써야한다 (padding: '1rem')
  CSS class 는 class= 가 아니라 className= 으로 해야한다

// 예를 들어 App.css 에 
.red-box {
	background: red;
    width: 300px;
    height: 100px;
}
// App.js
...
function App() {
	return (
    	<div className="red-box">hi</div>
    );
}
export default App;

• 주석은 {/ 주석 /} 또는 // 로 작성한다

props

properties 의 줄임말로 어떤 값을 컴포넌트에게 전달할 때 사용한다
예를 들어 Hello 컴포넌트에 name 값을 사용하고 싶다면 컴포넌트에게 전달되는 파라미터를 조회한다

// App.js
...
function App() {
	return (
    	<Hello name="Jake"/>
    );
}
export default App;
// Hello.js
...
function Hello(props) {
	return <div>hi {props.name}</div>
}
export default Hello;

여러개의 props 를 전달할 때

.props 를 쓰는 것 보다 비구조화 할당을 써서 조금 더 간결하게 작성 가능하다

// App.js
...
function App() {
	return (
    	<Hello name="Jake" color="blue"/>
    );
}
export default App;
// Hello.js
...
function Hello({ name, color}) {
	return <div style={{ color }}>hi {name}</div>
}
export default Hello;

dafaultProps 로 기본값을 줄 수 있다

컴포넌트에 props 를 주지 않았을 때 기본적으로 사용하는 값을 지정해 놓을 수 있다

// App.js
...
function App() {
	return (
    	<>
    		<Hello name="Jake" color="blue"/>
      		<Hello color="red"/>
    	</>
    );
}
export default App;
// Hello.js
...
function Hello({ name, color}) {
	return <div style={{ color }}>hi {name}</div>
}
Hello.defaultProps = {
	name: 'noName'
}
export default Hello;

컴포넌트 사이에 넣은 값을 조회하고 싶을 때

props.children 을 조회하면 된다

// Wrap.js
...
function Wrap({ children }) {
  	const style = {
    	border: '1px solid red',
      	padding: '10px',
    };
	return (
    	<div style={style}> {children} </div>
    )
}

export default Wrap;
// App.js
...
function App() {
	return (
    	<Wrap>
      		<Hello name="Jake" color="red">
      	</Wrap>
    );
}
export default App;