React

React는 Virtual DOM을 사용하여 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. DOM의 가벼운 사본과 비슷한 느낌이다.

리액트에서 데이터가 웹브라우저에 실제 DOM을 업데이트할 때는 다음 절차를 밟는다.

• 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
• 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
• 바뀐 부분만 실제 DOM에 적용한다.

JSX

JSX는 자바스크립트 확장문법이다

const a = (
	<div>
    	<h1>React</h1>
    </div>
  )

이런식으로 변환하면서 트리 구조의 객체로 정의할 수 있다,

JSX 장점

• 보기 쉽고 익숙하다.
• 오류가 있다면 코드를 변환하는 과정에서 이를 감지한다.
• 활용도가 높다.

JSX문법

컴포넌트에 여러 요소가 있다면 부모 요소 하나로 반드시 감싸야한다,

render() {
	return (
    <div>
    	<h1>리액트</h1>
        <h2>REACT</h2>
    </div>
   );
 }

리액트 v16 이상에서는 Fragment 컴포넌트가 도입되어 div로 감싸지않고 여러 요소를 렌더링하고 싶으면 Component와 함께 Fragment를 불러와서 사용한다.

JSX안에서는 내부에서 코드를 { }로 감싸면 자바스크립트 표현식을 쓸 수 있다.

리액트에서 DOM요소에 스타일을 적용할 때는 문자열 형태로 적용할 수 없다. 대신 CSS스타일을 자바스크립트 객체 형식으로 만들어 적용할 수 있다. 해당 객체에서 Key는 camelCase로 작성한다.

예) background-color ---> backgroundColor

HTML 코드를 작성할때에는 태그를 연 후 항상 닫아야한다.

<input type="text" name="firstname" />

props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정할 수 있다.

props를 렌더링할 때는 JSX 내부에서 { } 안에 감싸준다.

class MyName extends Component {
	render() {
    	return (
        	<div>
            	내 이름은 {this.props.name}
            </div>
        )
     }
 }

props에 접근할 때는 이렇게 this키워드를 사용한다.

class Name extends Component {
  render() {
    return (
      <MyNamet name=”react”/>
    );
  }
}

문자열 종류 외의 값을 컴포넌트에 전달할 때는 {} 로 감싸야 한다.