TIL(22)

💻 Today

1. 코드스테이츠

• react

• Algorithm (7, 8)

• React Twittler (pair)

---

2. 학습

• JSX

• create react app

---

3. React

리액트 3가지 특징

1. 선언형(Declarative) : 한 페이지를 보여주기 위해 html, css, js 로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향

2. 컴포넌트 기반(component-Based) : 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.

3. 범용성(Learn Once, Write Anywhere) : 리액트는 js프로젝트 어디에든 유연하게 적용될 수 있다. Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.

JSX

규칙

• opening tag와 closing tag로 감싸주어야 한다.

  // 올바른 표현
  <div>
  	<div>
  		<h1>Hello</h1>
  	</div>
  	<div>
  		<h2>Word</h2>
  	</div>
  </div>
  
  //올바르지 못한 표현
  <div>
  	<h1>Hello</h1>
  </div>
  <div>
  	<h2>Word</h2>
  </div>

---

• className 표기

<div className= "hello">Hello!</div> // 올바른 표기
<div class= "hello">Hello!</div> // X

---

• js 표현식 사용시, 중괄호({})이용

function App() {

const name = 'code';

return (
	<div>
		Hello, {name}!
	</div>
);
}

---

• 사용자 정의 컴포넌트는 대문자로 시작 : JSX로 작성되면 "대문자"로 시작해야 한다.

소문자로 시작하면 html 엘리먼트로 인식하기에 대문자로 작성

• 조건부 렌더링에는 if문이 아닌 삼항연산자 이용

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

---

• map()함수 사용 : map함수를 사용할 때는 반드시 "key" JSX속성을 넣는다. 그렇지 않으면 경고가 표시됨

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