React
프론트엔드 개발을 위한 JavaScript의 라이브러리
DOM과 다르게 CSS,JSX문법만 가지고 엡 어플리케이션 개발이 가능.
React의 특징
선언형(Declarative)
코드를 자세히 분석하지 않고도 코드의 의미를분석할 수 있다는 것을 의미(기능상상이 가능)
JSX (HTML, JS가 결합된 문법)으로 명시적으로 작성이 가능. html js왔다갔다 안해도됨예를 들업면 배열에서 for문과 map()을 예로 들어볼수 있는데 선언형은 map과 비슷하다고 보면됨. 아래 예제 에서 배열값을 두배로 만드는것에 집중한다.
[1,2,3,4].map((ele)=>{ return ele *2 })
컴포넌트 기반(component-Based)
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발이 가능
유지 보수가 편함.
테스트 하기가 쉬움 (어느 부분에서 문제가 발생하였는지)
컴포넌트
하나의 기능 구현을 위한 여러 종류의 코드 묶음
UI를 구성하는 필수 요소
리액트의 힘장
여러개의 컴포넌트를 모으고 조합해서 애플리케이션을 만들수 있음.
범용성(Learn Once, Write Anywhere)
JaveScript의 라이브러리 로써 JavaScript 개발환경에서 어디서든 유연하게 적용이 가능
JSX(JavaScript XML)
JSX (HTML, JS가 결합된 문법)
-
Reacit에서 UI를 구성할 때 사용하는 문법이며 JavaScript를 확장한 문법
이 문법을 통해 React 엘리먼트 생성을 할 수 있다. -
JSX는 JS가 확장된 문법이지만 브라우저가 바로 실행할수 있는 JS가 아님.
그렇기 때문에 브라우저 사용을 위해서는 "Babel"을 이용하여 JSX를 브라우저가 이해할수 있는 JS파일로 컴파일해야 함. 컴ㅍ파일 후 JS를 브라우저가 읽고 화면에 렌더링
JSX를 사용하는 이유
- DOM은 HTML과 JS에 별도로 작업해야 하지만 JSX를 이용해 DOM보다 명시적으로 코드작성이 가능
2.JS문법과 HTML을 동시에 이용하여 기능과 구조를 한번에 이해 가능
JSL 규칙
1. 하나의 엘리먼트안에 모든 엘리먼트가 포함 / opning tag와 closing tag로 감싸주어야 함. / 단독으로 있을경우 문제없음.
<div>
<div>
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>2. 엘리먼트 클래스 사용시, className으로 표기
React에서 CSS class 속성을 지정하려면 "className"으로 표기해야함.
만약 class로 적는다면 react에서 자바스크립트 클래스로 받아버림
<div class ="greeting"> </div> // 사용하면안됨
<div className ="greeting"> </div> // ok3.JavaScript 표현식 사용시 중괄호{} 이용 중괄호 사용하지 않으면 일반 텍스트로 인식
변수를 불러올때도 {}를 사용해야함. 객체의 value를 가져올때도 사용필요.
4.사용자 정의 컴포넌트는 대문자로 시작(PascalCase)
5.조건부 렌더링에는 if문이 아닌 삼항연산자 이용
6.여러개의 HTML 엘리먼트를 표시할때, map()메서드 이용
- 사용하지 않는경우는 하드코딩을 해야하는데 이렇게 될 경우 추가 사항이 있을때마다 계속 업데이트를 해야함.
- map메소드 사용시 key속성을 넣지 않으면 key속성을 넣어야 한다는 경고가 표시됨. key 속성 위치는 map메소드 내부에 있는 첫번째 엘리먼트에 넣어야 한다.
Creat React App
리액트 SPA(single page application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
복잡한 개발세팅을 해준다고 보면됨 (JSX를 JS로 바꿔주는 bable 기타등등의 개발 세팅이 필요)
CLI에서 만들수 있음
npx create-react-app '파일명'
**수업 내용
리액트 사용하는 이유 : 웹개발 (특히 프론트앤드)할때 쓰기 좋으므로.
What is React
- 선언형 프로그래밍
- 컴포넌트
- 라이브러리 범용성
Dom --> creatElement 3번 append3번을 해야하는데
React -> HTML처럼 만들고 싶은 만큼 태그를 써서 만들면됨.
react같은경우는 JSX 엘리맨트, JSX표현식으로 작성해야 한다.
react같은경우는 그냥 객체를 출력하려고 하면 에러가 발생함.
혼자 쳐보는 코드
함수 선언과 inline으로 작성해서 하는법.
1.함수로 먼저 선언한 다음 해당 변수만 불러오는 방법
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React via npm." },
{ id: 3, title: "Practice", content: "Practice React via npm run start" }
];
export default function Blog() {
const blog = posts.map((post)=>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
)
return (
<div className="woopoer">
{blog}
</div>
);
}inline으로 바로 사용해서 적용하는 법
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React via npm." },
{ id: 3, title: "Practice", content: "Practice React via npm run start" }
];
export default function Blog() {
return (
<div>
{posts.map(function (ele) { //모든값을 {로 감싸버리면됨.}
return (
<div key={ele.id}>
<h3>{ele.title}</h3>
<p>{ele.content}</p>
</div>
);
})}
</div>
);
}