2023.02.24) 항해 19일차

오늘부터 본격적으로 리액트를 접하기 시작했다. 리액트는 처음이라 긴장하며 시작했지만, 생각보다 할 만했다.

사실 쉬는 시간을 많이 가져서 생각보다 공부를 많이 하지는 않았지만, 이정도로도 나쁘지 않다!! 물론 내일이 힘들겠지만...!

리액트지만 뭔가 자바스크립트의 문법을 토대로 하다보니 그렇게 어렵진 않아서 끙끙대지는 않았다.

(물론, 많이 안 본 탓도 있지만......)

그래도 뭔가 재미있어서 내일 강의 얼른 다 보고 과제하며 코드를 짜보는 시간을 가져야겠다!!!

지금 실력으로는 어림도 없지...!

 

 

 

1) 개발환경 (npm,  yarn)

	npm	yarn
공통점	①  자바스크립트 런타임 환경인 노드의 패키지 관리자   ②  전 세계의 많은 개발자들이 만든 유용하고 다양한 패키지   ③  프로그램을 올려놓은 '온라인 데이터베잇'에서 쉽게 설치하고, 삭제할 수 있도록 도와주는 관리자
차이점	① node.js를 설치할 때 자동으로 생성된다.   ② Node Package Manager의 약자   ③ NPM platform 자체	① 2016년에 페이스북에서 개발한 패키지 관리자   ② npm과 호환성이 좋다.   ③ npm보다 속도, 안정성 측면에서 훨씬 좋다.

 

2) CRA (Create-react-app)

리액트 프로젝트를 하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구이다.

-순서-

① 터미널에서 원하는 폴더로 들어간 후에 yarn create react-app week-1를 하여 생성한다.

② 생성된 폴더로 이동하여 yarn start를 하면 리액트 앱이 실행된다.

 

3 ) Component

리액트 세계에서 말하는 컴포넌트(블럭)는 즉 함수다.

컴포넌트를 만든다는건 html을 return 하는 함수를 만드는 것이다.

이렇게 컴포넌트를 구분하여 사용한다.

① 컴포넌트 안에 컴포넌트 넣기

컴포넌트는 다른 컴포넌트를 품을 수 있다.

이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고,

다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부른다.

function Mom() { //부모 컨포넌트
  return <Child />
}

function Child() { //자식 컨포넌트
  return <div>나는 딸입니다.</div>;
}

function App() {
  return <Mom />;
}

export default App;

4) JSX (JavaScript + HTML)

리액트에서는 딱 하나의 html 파일만 존재한다. (public 폴더 아래에 있는 index.html)

App.js 파일에서 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다.

 

컴포넌트에서 반환할 수 있는 엘리먼트는 1개이기 때문에 여러개를 작성하면 오류가 난다.

// 이렇게 태그로 전체를 감싸주어 하나로 만들어야 한다
return ( 
    <div>
      <p>안녕하세요 :)</p>
      <input type='text'/>
    </div>
  );

① JSX에서 javascript 값, map , 삼항 연산자 가져오기

JSX에 javascript 값, map , 삼항 연산자 등을 중괄호{ }를 사용하여 쓸 수 있다.

JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 className으로 사용한다. (id는 id로 사용한다)

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 쓴다 :) */}
      {/* 삼항 연산자를 사용한다면 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

 

② 인라인으로 style 주기

스타일을 줄 땐, css 문법 대신 json 형식으로 넣어준다.

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있다!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

 

5) Props

props는 부모 컴포넌트로부터 받아온 데이터이다.

props를 받고 전달만 해주는 중간다리 역할을 하는 현상을 Props Drilling라고 한다.

function App() {
  function Grandfa() {
    const name= 'Ori';
    return <Mom grandfaName={name}/> //props로 name을 전달했다.
  }

  //Props Drilling
  function Mom(props){ //이게 바로 props다.
    return <Son grandfaName={props.grandfaName}/> //props로 name을 전달했다.
  }

  function Son(props){ //이게 바로 props다.
    return <div>I'm {props.grandfaName}.</div>
  }

  return (
    <Grandfa />
  )
}

 

① children

<Component props={props} /> 와 다른 방식으로 자식 컴포넌트에 정보를 전달해준다.

Layout 컴포넌트를 만들 때 자주 사용한다.

import React from "react";

function User(props) {
  return <div>{props.children}</div>; //정보를 받는 방식은 기존과 동일
}

function App() {
  return <User>안녕하세요</User>; //children props를 보내는 방식
}
export default App;

 

 

② 구조분해할당

앞서 설명했듯이 props는 object literal 형태의 데이터 입니다. 그래서 우리는 구조 분해 할당을 이용할 수 있습니다.

만약 여러개의 props를 받는다면, { } 안에 여러개의 props를 그대로 써주면 됩니다.

function Todo({ one, two, three, four }){
	return <div>{two}</div>
}

 

③ defaultProps

defaultProps란, 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기 값이다.

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// 이렇게 defaultProps를 설정한다.
Child.defaultProps={
	name: '기본 이름'
}


// 구조 분해 할당 문법을 사용하면 이렇게도 할 수 있다.
function Child({ name = '기본이름' }){
	return <div>내 이름은 {name} 입니다. </div>
}