Main Course 주특기 1강 - React

박경준·2021년 6월 25일
3주차JSXJavaScriptPropsReactcomponent
0

main course - react

목록 보기
1/6

주특기 1강!

  1. NVM으로 노드 버전을 관리할 수 있다.
  2. npm과 yarn으로 react 패키지를 설치할 수 있다.
  3. CRA(create-react-app)을 사용해 React를 설치한다.
  4. React에서 쓰는 태그(JSX)를 사용해서 화면을 그릴 수 있다.
  5. 클래스형 컴포넌트 vs 함수형 컴포넌트! 차이점을 안다.
  6. 화면을 예쁘게 꾸미는 3가지 방법(CSS, SCSS, styled-component)중 CSS를 살펴본다.
  7. 기초 자바스크립트 문법을 이해한다.

자바스크립트 기초체력 키우기

[클래스 상속]

  • super 키워드
    • 메소드로 사용할 수 있다.(constructor 안에서)
      • 부모의 constructor를 호출하면서 인수를 전달한다.
        • this를 쓸 수 있게 해준다.
      • 키워드로 사용할 수 있다.
        • 부모 클래스에 대한 필드나 함수를 참조할 수 있다.
class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		return this.name;
	}
}

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
	// 생성자 함수
  constructor(name, age) {
		// super를 메서드로 사용하기
		super(name); 
		this.age = age; 
	}
	
	// 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
	// 오버라이딩한다고 해요.
	showName(){
		// super를 키워드로 사용하기
		return '내 고양이 이름은 '+super.showName()+'입니다.';
	}
	
	showAge(){
		console.log('내 고양이는 '+this.age+'살 입니다!');
	}
}

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

[Spread 연산자]

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

console.log(new_array);

[비구조화 할당]

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

<비구조화 할당시 이름 바꾸기> 

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname); // '멍멍이'

<배열 비구조화 할당> 

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

<깊은 값 비구조화 할당> 

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

[그 밖에 자주 사용되는 JS 메서드]

map, filter, reduce, concat, from...

리액트 시작

yarn create react-app 앱 이름
yarn start

클래스형 컴포넌트

import React from 'react';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';
import './style.css';

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {

  constructor(props){
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
    // this 키워드를 통해 state에 접근할 수 있어요.
    console.log(this.state);

      return (
      <div className="App">
        <div className="container">
            <h1 className="title">내 버킷리스트</h1>
            <hr className="line"/>
            {/* 컴포넌트를 넣어줍니다. */}
            {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
            <BucketList arr={this.state.list} />
        </div>
      </div>
    );
  }
}

export default App;

함수형 컴포넌트

// 리액트 패키지를 불러옵니다.
import React from 'react'; 

// 함수형 컴포넌트는 이렇게 쓸 수도 있고
// function Bucketlist(props){
//     return (
//         <div>버킷 리스트</div>
//     );
// }

// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.
// 저희는 앞으로 화살표 함수를 사용할거예요.
// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
const BucketList = ({arr}) => { // props 객체들 중 arr 키를 가져오겠다는 뜻.

    // Quiz 1: my_list에 ['a', 'b', 'c'] 대신 부모 컴포넌트가 넘겨준 값을 넣으려면 어떻게 해야할까요?
    const my_lists = arr

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div className="lists">
            {
                // js의 내장 함수 중 하나인 map입니다. 리스트의 갯수만큼 => 오른쪽 구문을 반복해요. 
                // 자세한 사용법은 아래 링크를 확인해주세요.
                // https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
                my_lists.map((list, index) => {
                    // 콘솔을 확인해봅시다 :)
                    console.log(list, index);
                    return (<div className="list-item" key={index}>{list}</div>);
                    // key prop은 해당 요소의 id 같은 값이다. 리액트에서는 변경된 요소에 대해서만 업데이트를 해주는데, key를 통해 변경된 요소를 구분한다.
                    // 아래에 추가하는 경우 index를 사용하고, 위로 추가하는 경우 해당요소의 id 값을 사용함
                })
            }
        </div>
    );
}

// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;

BucketList 함수의 매개변수에 들어가는 {arr}는 app.js에서 넘겨주는 props 데이터들(arr={this.state.list}) 중 arr key를 통해 해당되는 value를 가져와서 arr 변수에 바로 할당하는 비구조화 할당 을 이용하였다.
결론적으로 app.js에서 컴포넌트로 넘겨주는 props의 변수, 컴포넌트에서 props를 받는 매개변수, props 데이터를 컴포넌트에서 활용할 변수 세 개가 다 같은 이름을 가져야한다.

1강 과제

profile
박경준
빠굥
다음 포스트

Main Course 주특기 2강 - React

0개의 댓글