오늘은 React를 이용한 트위터 비슷한 간단한 SNS(?)를 하드코딩해봤다.
React
: 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리
선언형 => jsx파일에 html, js파일 더나아가서는 css파일의 역활도 할 수 있다.
import React from "react";
const datas = [
{ id: 1, title: "Hello World", content: "Wecome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React from npm." },
{ id: 3, title: "Hello World", content: "Wecome to learning React!" },
{ id: 4, title: "Installation", content: "You can install React from npm." },
{ id: 5, title: "Hello World", content: "Wecome to learning React!" },
{ id: 6, title: "Installation", content: "You can install React from npm." },
];
export default function Blog() { // 보통 최상위 부모관계 like root의 함수이름은
// App()이다.
// 하드코딩 되어있는 리스트를 map 함수를 이용하여 구현해봅시다.
const blogs = datas.map((data)=>
<div className=“data”key={data.id}>
<h3>{data.title}</h3>
<p>{data.content}</p>
</div>
);
return (
<div class="post-wrapper">{blogs}</div>
);
}React는 class속성대신 className를 쓴다, 또한 객체를 요소로 가진 배열에서 map()메소드를 쓸 때 부모태그에 class처럼 key라는 속성을 넣어줘서 그 속성값을 map()을 쓸때 함수의 인자, 매개변수 즉, 객체의 id값을 넣는다. 만약 객체에 id값이 없다면 임의로 할당한다. 인덱스로 차례대로 출력하기 때문이다.
컴포넌트 기반 => 각 기능자체에 기능구현의 집중.. 독립성,, 코드가 나뉘어져있어서, 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.
만약 어느 기능을 구현하기 위해 함수 로직을 짠다고 치자. Jsx, 즉 react는 그 함수 로직이 그 컴포넌트 안에 다 들어있기때문에 독립성을 띈다고 할 수 있다. 만약 html, js, css 파일이 따로있고, js에 기능구현을 하기위해 함수가 여러개 있고 함수 선언식을 이용해서 함수를 코드 아래위치하고 js파일 위에서 자신이 원하는 기능구현을 하기위해 여러 함수선언식이 된 코드를 끌어올때 독립성이 띄는 컴포넌트보다 휠씬 가독성이 떨어질 것이다.
또한 React는 범용성을 띈다 즉 다양한 곳에서 사용가능하다는 것이다.
그리고 jsx파일을 작성할때 이러한 규칙을 배웠다.
Jsx rules
Class => className
하나의 엘리먼트 안에 모든 엘리먼트가 포함
js표현식 사용시, {}, 중괄호 이용
사용자 정의 컴포넌트(사용자가 임의로 만든 태그)는 대문자로 시작(PascalCase)
조건부 렌더링은 if문이 아닌 '삼항연산자'를 이용해야한다.
여러개의 html 엘리먼트를 표시할때, map()함수를 이용
그리고 삼항연산자를 배웠는데,,,
Const el = 1;
El === 1 ? True : false;이뜻은
if(el === 1){
Return true;
}else{
Return false;}이란 뜻이다. 즉 if, else문 안에서 함수실행도, 변수에 값할당도 가능하다.
