React 심화반 - 1주차

Javascript 기본 문법

1. 변수와 상수

• 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보를 모아놓은 객체
• 호이스팅 : 자바스크립트 파일을 읽어올 때 선언을 맨 위로 끌어올리는 것
• 원시형 : 한 가지 타입의 데이터만 담을 수 있는 형

1-1. 변수의 생성 3단계

① 선언 : 실행 컨텍스트에 변수 객체를 등록
② 초기화 : undefined로 초기화한 등록된 변수를 위해 메모리에 공간을 확보
③ 할당 : 초기화된 변수에 실제 값을 할당

1-2. var

• var로 선언한 변수는 function-scope를 가진다.
• 선언과 초기화를 한번에 한다.
• 재선언이 가능하다.
• 호이스팅이 되기 때문에 선언하기 전에도 사용 가능하다.

1-3. let

• 자바스크립트에서 변수 생성 키워드
• block-scope를 가진다.
• 재선언은 불가하고, 재할당은 가능하다.

1-4. const

• 자바스크립트에서 상수 생성 키워드
• block-scope를 가진다.
• 재선언, 재할당 둘다 불가하다.
• 선언과 동시에 할당한다.

1-5. TDZ(Temporal Dead Zone) : 일시적 사각지대

• var와 let, const의 차이점은 변수가 변언되기 전에 호출하면 ReferenceError가 발생한다.
• let과 const 둘 다 호이스팅은 되지만 TDZ때문에 오류가 난다.
• 초기화 단계에서 메모리를 확보하는데, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없기 때문에 변수를 참조할 수 없는데 이걸 TDZ라고 한다.

1-6. 자료형

• 7가지 원시형과 객체 총 8가지 기본 자료형을 지원한다.

① 정수, 소수점을 저장하는 int형
② 아주 큰 숫자를 저장하는 BigInt형
③ 문자열을 저장하는 string형
④ 논리값(true/false) boolean형
⑤ 값이 할당되지 않음을 나타내는 독립 자료형 undefined
⑥ 값이 존재하지 않음을 나타내는 독립 자료형 null
⑦ 복잡한 자료구조를 저장하는 객체형
⑧ 고유 식별자를 만드는 Symbol형

2. 객체

2-1. 객체란?

: key로 구분된 다양한 데이터의 집합하고, 복잡한 구조의 데이터를 저장한다.

• 중괄호({}) 안에 여러 쌍의 property 저장 가능하다.
  • 프로퍼티는 key : value 로 구성된다.
  • key는 문자형, value는 모든 자료형이 들어간다.

2-2. 객체 수정

• const로 선언된 객체는 재할당은 안되지만 수정은 가능하다.
• 선언된 객체는 메모리 영역이 따로 생성되고 기존 공간에는 객체에 대한 참조(메모리 영역의 주소)가 저장된다.
• 따라서 객체 안의 데이터가 변해도 참조는 변하지 않기 때문에 객체를 수정할 수 있다.
• 같은 말로 객체의 property는 보호되지 않는다.

3. 함수

3-1. 함수란?

: 코드들을 묶어놓은 블럭으로 행동을 할 수 있는 객체

• 객체 중의 하나로 특별한 값으로 취급한다.

3-2. 함수 선언문 & 함수 표현식(화살표 함수)

• 함수 선언문 : function과 함수 이름을 사용한 방법
• 독립된 구문으로 존재한다.
• 선언과 동시에 바로 초기화가 된다.

  function cat() {
      console.log('perl');
  }

• 함수 표현식 : 변수에 할당하는 방법
• 표현식의 일부로 존재한다.
• 바로 초기화가 되지 않고, 'let cat = function(){' 구문을 만나면 함수를 만든다.

  let cat = function() {
      console.log('perl');	
  }

• 화살표 함수 : 함수 표현식의 단축 표현

  let cat2 = () => {
      console.log('perl2');
  }

3-3. 지역변수 & global변수

• 지역변수
  • 함수 내에서 선언한 변수
  • 함수 내에서만 접근 가능
• global변수
  • 함수 외부에서 선언한 변수
  • 함수 내에서도 접근 가능
  • 함수 내부에 같은 이름의 지역변수는 사용 불가

3-4. 콜백 함수

: 함수를 값처럼 전달할 때, 인수로 넘겨주고 전달한 함수를 나중에 필요할 때 호출해서 사용하는 함수

  const playWithCat = (cat, action) => {
      action(cat);
  }

  const useBall = (cat) => {
      alert(cat+"과 공으로 놀아줍니다.");
  }

  //playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수
  playWithCat("perl", useBall);

4. Prototype

: 자바스크립트의 객체는 자신의 부모 객체의 원형과 연결되어 있어 property나 메소드를 상속받아 사용할 수 있는 부모 객체

• 부모 객체를 참조하는 것을 Prototype Link라고 한다.
• 객체는 함수의 프로토타입 객체를 복사해서 생성된다.
• 객체는 어디에서 복제되어 생성되었는지 기억한다.

5. 메인 페이지(PostList) 생성

5-1. PostList.js 생성

pages/PostList.js

  import React from "react";

  const PostList = () => {
    return (
      <React.Fragment>
        postList
      </React.Fragment>
    );
  }

  export default PostList;

5-2. Router

shared/App.js

import './App.css';
import React from "react";
import {BrowserRouter, Route} from "react-router-dom";
import PostList from "../pages/PostList";

function App() {
  return (
    <React.Fragment>
      <BrowserRouter>
        <Route path="/" exact component={PostList}/>
      </BrowserRouter>
    </React.Fragment>
  );
}

export default App;

5-3. 컴포넌트 분리

• 포스트 목록 페이지는 헤더와 포스트 컴포넌트로 분리한다.
• 작업하기 전에 들어갈 내용을 나눠서 작성한다.
• 필요한 데이터를 defaultProps에 담아두어 오류 발생을 방지한다.

  Post.defaultProps = {
    user_info: {
      user_name: "mean0",
      user_profile: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
    },
    image_url: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
    contents: "고양이네요!",
    comment_cnt: 10,
    insert_dt: "2021-02-27 10:00:00",
  };

6. 최소단위 컴포넌트 생성

6-1. styled-components로 Grid 생성

• 삼항 연산자를 사용해 다른 style 속성의 여부에 따라 style을 다르게 준다.
• box-sizing : 박스의 크기 기준을 설정하는 속성

elements/Grid.js

  const GridBox = styled.div`
    width: ${(props) => props.width};
    height: 100%;
    box-sizing: border-box;
    ${(props) => (props.padding ? `padding: ${props.padding};` : "")}
    ${(props) => (props.margin ? `margin: ${props.margin};` : "")}
    ${(props) => (props.bg ? `background-color: ${props.bg};` : "")}
    ${(props) => props.is_flex
        ? `display: flex; align-items: center; justify-content: space-between; `
        : ""}
  `;

6-2. Image 컴포넌트 생성

• 이미지의 모양이 원과 사각형일 때 나눠서 스타일을 각각 나눠서 적용한다.
• 사각형 이미지는 4:3의 비율을 맞추기 위해서 outter와 inner영역에 따로 스타일을 주었다.

elements/Image.js

  const Image = (props) => {
    if(shape === 'circle'){
      return(
        <ImageCircle {...styles}></ImageCircle>
      )
    }
    if(shape === 'rectangle'){
      return(
        <AspectOutter>
          <AspectInner {...styles}></AspectInner>
        </AspectOutter>
      )
    }
  }
   
  const AspectOutter = styled.div`
      width: 100%;
      min-width: 250px;
  `;

  const AspectInner = styled.div`
      position: relative;
      padding-top: 75%;
      overflow: hidden;
      background-image: url("${(props) => props.src}");
      background-size: cover;
  `;

  const ImageCircle = styled.div`
      --size: ${(props) => props.size}px;
      width: var(--size);
      height: var(--size);
      border-radius: var(--size);

      background-image: url("${(props) => props.src}");
      background-size: cover;
      margin: 4px;
  `;

6-3. Text 컴포넌트 생성

const P = styled.p`
  color: ${(props) => props.color};
  font-size: ${(props) => props.size};
  font-weight: ${(props) => (props.bold)? '600' : '400'};
`;

6-4. import

• import의 갯수가 지금은 몇 개 없지만 점점 늘어나면 보기 힘들 것이다.
• index.js파일에 import를 모아서 작성한 후 export까지 해준다.
• 컴포넌트마다 필요한 import만 불러와서 사용하면 좀 더 편리하고 정리되어 보기 편하다.

elements/index.js

import Grid from './Grid';
import Image from './Image';
import Text from './Text';

export { Grid, Image, Text };

components/Post.js

import { Grid, Image, Text } from '../elements';

• padding이나 margin은 페이지에서 설정해준다. 작은 단위에 조건을 많이 주면 다른 페이지에서 사용하기 힘들기 때문이다.