항해 12일차
드디어 주특기 주차에 들어갔다.
오늘은 리액트 입문 강의를 들었다.
강의 내용을 보자면
리액트
리액트를 통해서 UI를 Building 할 수 있다. 여기서 UI는 유저 인터페이스르 의미한다. 즉 UI Building은 프론트 엔드 영역을 구축한다는 것이다.
리액트는 spa기반의 프론트엔드 개발 프레임워크 중 하나이다. 또한 독립적인 컴포넌트 단위 블록을 사용하는 라이브러리이다.
여기서spa는 싱글 페이지 애플리케이션으로 한개의 페이지로 이루어진 애플리케이션을 의미한다. spa는 서버의 1회 리소스 요청이 가능하고, 필요할 때 데이터만 받아서 기존 페이지를 수정하기 때문에 자연스로운 ux구현이 가능하다.
반대 개념인 mpa의 단점인 갱신할 페이지가 많을수록 감빡거리는 현상을 줄일 수 있다.
리액트 환경을 구축해보자 !!
리액트 설치 방법은 두 가지로 나뉜다. 첫 번째는 npm 방법, 두 번째는 yarn 방법이 있다. 두 가지 방법의 차이는 성능과 속도 차이이다. 그 부분에서는 yarn이 다 좋다.
리액트 런타임 환경은 두 가지로 나눌 수 있다. 첫 번째 브라우저 , 두 번째 node 환경이다. 여기서 런타임이란? 프로그래밍 언어가 구동되는 환경을 말한다.
리액트를 설치 해보자 !!
먼저 폴더를 생성 후 npm, yarn 환경을 선택 후 진행하면 된다. 터미널에 npm은 npx create-react-app 이름을 치면 되고 yarn은 yarn create react-app 이름을 치면 자동적으로 설치가 된다.
이제 주요 개념에서 설명하겠다.
컴포넌트는 리액트에서 벽돌이라고 생각하면 된다. 벽돌을 쌓아 집을 짓는다는 느낌으로 생각하면 된다. 즉 컴포넌트들이 모여서 개발하는 것이다.
컴포넌트에도 종류가 있는데 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 거의 클래스형보다는 함수형을 많이 쓴다.
함수형 컴포넌트는
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
return <div>hello</div>
}이런 구조로 되어 있다.
이제 컴포넌트를 만들어 보자!!
컴포넌트의 기본 구조는...아래와 같다.
import React from 'react'
function aaaa() {
return (
<div>
</div>
)
}
export default aaaa부모-자식 컴포넌트
컴포넌트 안에 컴포넌트 넣기 컴포넌트 를 품을 수 잇다. 이때 다른 컴퍼넌트를 품는 컴포넌트를 부모 컴포넌트, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 한다.
기본 구조
import React from "react";
// 자식
function Child() {
return <div>나는 아들입니다.</div>;
}
// 부모
function App() {
return <Child />;
}
export default App;jsx
컴포넌트는 jsx 확장자가 맞다.
js? jsx?
문자열, Html도 아니다. 자바스크립트를 확장한 문법이다.
동일하다. 하지만 협업할 때 어떤 파일인지 쉽게 보기 위해서 사용한다.
props
반드시 읽기 전용으로 취급하며, 변경하지 않는다. 위에서 아래로 실행한다.
import React from "react";
// 자식
function Son(props) {
console.log(props);
return <div>{props.motherName}의 아들이에요</div>;
}
// 부모에서 자식 정보를 전달했다.
function M() {
const name = "흥부인";
return <Son motherName={name} />;
}
function GF() {
return <M />;
}
// 부모
function App() {
return <GF />;
} // 나는 아들이에요
export default App;props drilling
Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서
React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.
import React from "react";
// 자식
function Son(props) {
return <div>{props.gname}의 아들이에요</div>;
}
// 부모에서 자식 정보를 전달했다.
function M(props) {
// 중간 다리 역할
// 이럴 경우 데이터를 안받아도 받아야됨 프롭 드릴링이 발생
const gname = props.gN;
return <Son gname={gname} />;
}
function GF() {
const name = "산타 할아버지";
return <M gN={name} />;
}
// 부모
function App() {
return <GF />;
} // 나는 아들이에요
export default App;children
//App
import React from "react";
import Layout from "Layout";
function App() {
return (
<Layout>
<div>여긴 About의 컨텐츠가 들어갑니다.</div>
</Layout>
);
}
export default App;//Layout
import React from "react";
function Layout(props) {
return (
<>
<header>항상 출력되는 머릿글입니다.</header>
{props.children}
</>
);
}
export default Layout;props 추출하기
import React from "react";
function Child({ age, name, children }) {
console.log(age);
console.log(name);
console.log(children);
return <div>Child</div>;
}
export default Child;import React from "react";
import Child from "Child";
function App() {
const name = "test";
return (
<Child age={21} name={name}>
이름
</Child>
);
}
export default App;defaultprops
import React from "react";
function Child({ age, name, children }) {
console.log(age);
console.log(name);
console.log(children);
return <div>Child</div>;
}
Child.defaultProps = {
age:"기본나이",
}; // 기본 값 설정
export default Child;props를 더 봐야겠다.
