React

간단한 개발용 앱 실행하기

• cli로 간단한 리액트앱 실행할 수 있다.
  npx create-react-app

리액트 장점

• 선언형
  명시적인 JSX를 사용한다
• 컴포넌트기반
  하나의 기능 구현을 위해 여러 종류 코드를 묶어둠.
  재사용성, 독립성
• 범용성

jsx 규칙

• class사용시 className을 사용해야함
  class로 사용할시 , Js로 읽음

<div className="aaa"></div>

• 오픈태그와 클로징태그의 존재는 필수
  안에 태그네임을 설정하지 않더라도 태그자체는 존재해야함.

<>
  </>

• 사용자 정의 컴포넌트는 대문자로 시작해야함. (PascalCase)
• 조건부 렌더링은 '삼항연산자'사용해야함.

<div>
  {
	(1+1 ===2) ? (<p>정답</p>) : (<p>오답</p>)
  }
</div>

• 여러개의 html엘리먼트를 표시할때, map()함수를 이용한다.

const posts = [
  {id:1, title:"hello", content:"welcome!!"},
  {id:2, title:"installation", content:"npm method"}
];

function Blog(){
	const content  = posts.map((post) => 
        	<div key={post.id}>
          		<h3>{post.title}</h3>
                <h3>{post.content}</h3>               
          	</div>
    );
	
	return (
    	<div>
      		{content}
        </div>
    );
}

• key속성
  리액트에서 map메소드 사용시, key속성을 넣어주기 !
  그렇지 않으면 경고가 뜸.
  보통key값으로 id값을 할당하는데, 정 없는경우 배열의 인덱스를 넣어서 해결하기도 함.

Component-based

• 컴포넌트
  하나의 기능 구현을 위해 묶어놓은 여러코드의 묶음 .
  UI를 구성하는 필수요소임.

• 리액트 어플리케이션은 컴포넌트들의 관계를 트리 구조로 형상화 하여 표현이 가능