👩‍🏫 React 정리는 갑자기 왜..?
항해99 의 주특기 주간 이 시작 되고 정말 열심히..그리고 빠르게 리액트 강의를 들었습니다. 강의가 정말 알차고 좋은 내용이 많아서 놓치는 부분 없이 복습하면서 심화 과정 수업을 듣고 싶다는 생각을 했습니다. 이번기회에 내가 좋아하는 리액트 를 정리해보자 라는 마음으로 강의 내용을 정리해 보려 합니다! 이 모든 내용의 출처는 스파르타 코딩의 리액트 강의 입니다👍👍

📝 리액트를 배우기 전 알아두면 좋은 기본적인 개념들!

◾ class

객체를 생성하기 위해 변수와 함수를 정의하는 틀

1) 생성자 함수 : let cat = new Cat('perl'); 이렇게 class를 이용해서 객체를 만들 때, 가장 먼저 실행되는 함수로 생성되는 객체를 어떻게 초기화(초기 값 설정)을 할건 지 정의해 두는 부분입니다!

class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

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

let cat = new Cat('perl');
cat.showName();
console.log(cat);

2) 클래스 상속(inheritance) : 기존에 있는 클래스의 자식 클래스를 만들어 주는 것! 이렇게 하면 자식 class는 부모가 가진 생성자와 method를 그대로 이용할 수 있으면서 더 내용을 더 추가 할 수 있습니다!! 이때 부모 내용을 그대로 이용 할 때 쓰는 것이 바로 super 이고 같은 이름의 매서드를 쓰지만 내용은 더 추가하거나 바꾸는 걸 overriding 이라고 합니다.

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
	// 생성자 함수
  constructor(name, age) {
		// super를 메서드로 사용하기
    	// super가 있어야 this 사용 가능..
		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();

◾ let, const

: let과 const는 모두 block 단위, 즉 block scope 입니다!

👀 여기서 scope란?
변수를 선언하고, 그 변수를 사용할 수 있는 유효범위 입니다. 변수에 접근 할 수 있는 범위 입니다! 따라서 if문이나 for문 같은 block 즉, {} 안에서 선언된 변수는 그 밖에선 똑같은 친구로서 쓸 수는 없다는 의미 입니다!!

: let 은 한번 선언하고 그 다음에 값을 수정할 수 있지만, const 는 한번 정하면 바꿔 줄 수 없습니다. 따라서 값이 계속 변하는 거라면 let으로, 고정 값이고 선언 이후에 바뀔일이 없으면 const 사용!

◾ Spread Operator - spread 연산자

: 객체 안에 있는 요소들을 하나 하나 낱낱이 객체 바깥으로 꺼내주는 연산자 입니다!
: 아래와 같은 코드는 새로운 배열([] 껍데기)에 array의 요소를 하나하나씩 꺼내 넣어줍니다! 그리고 그 새롭게 만들어진 배열을 new_array 라는 변수에 할당합니다!

let array = [1, 2, 3, 4, 5]
let new_array = [...array]

◾ 리액트에서 유용하게 쓰이는 내장함수들!

📜 map

: 어떤 배열을 각 요소마다 수정해서 새로운 배열 을 만들어 줍니다! 여기서 중요한 건 새로운 배열을 만들어주므로 기존의 원래 array는 그대로 유지된다! 입니다.

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{ 
	return array_item + 1;
});
console.log(new_array); // [1, 2, 3, 4, 5, 6]

console.log(array_num); // [0, 1, 2, 3, 4, 5]

🛒 filter

: 어떤 기준에 만족하는 요소만 모아서 새로운 배열 을 만들어 줍니다

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => array_item > 3})

console.log(new_array) // [4, 5] 

🧩 concat

: 두 배열을 합치거나 배열에 특정 깂을 추가하는 함수 입니다. 역시나 원본 배열은 변하지 않아요! 하지만 두 배열의 요소 중 중복되는 게 있으면 그대로 중복되면서 들어가요. 이걸 해결하기 위해선 아래처럼 array의 내장함수인 new Set()** 을 써서 중복을 없애줍니다!

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = [...new Set([...array_num01, ...array_num02])];

console.log(merge); // [0, 1, 2, 3, 4, 5]

🔗 from

: 유사 배열을 복사해서 새로운 배열을 만들거나 아예 새로운 배열을 만들 때 사용됩니다!

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const text_array = Array.from('hello', (item, idx) => {return idx});

console.log(text_array);


// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});

console.log(new_array);

🧨본격적으로 React Project 시작!

◾ 기본적인 설치 준비

여기서 부터는 반드시 terminal(powershell)이 아닌 git bash 에서 아래 작업을 수행합니다!

1) NVM 설치 : Node Version Manager, 한 개의 시스템에 다양한 노드 버전을 설치하고 사용할 수 있게 해줍니다!

nvm --version //설치확인
nvm ls // 원하는 버전 설치후 설치된 모든 nvm list 보기

2) node.js 설치

nvm install [설치할 버전]

3) 사용중인 node 버전을 바꾸고 싶을 땐?

nvm use [사용할 노드 버전]

4) yarn 설치 : 라이브러리나 패키지를 가져다 쓸 수 있도록 도와주는 패키지 매니저 입니다! node를 설치하면 자동으로 비슷한 역할을 하는 npm 이 설치되지만 좀 더 빠른 yarn을 npm을 이용해서 설치해봅니다

npm install -g yarn 

5) CRA(Create-React-App) 설치 : 웹사이트를 만들 때 필요한 것을 몽땅 넣어 놓은 만능(?) 패키지! 라고 생각하면 됩니다!

yarn add global create-react-app

6) 리액트 프로젝트 만들기!! : 원하는 폴더로 가서 만들어 주기!

yarn create react-app [원하는 폴더(프로젝트) 이름]

◾ JSX란?

📖 React 공식 문서에서는 ?

const element = <h1>Hello, world!</h1>;

This funny tag syntax is neither a string nor HTML.
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like.
즉, HTML같이 생겼지만 실제로는 Javascript에서 확장된 문법이 라고 합니다! UI가 어떻게 생겼는지 표현하는 데에 JSX를 사용하고 함수를 연결해주면 됩니다!!

• 리액트는 JSX 문법을 사용해 React DOM을 렌더링 시켜서 뷰를 그립니다!

• inline style
  : JSX에 JavaScript부분을 가져오려면 기본적으로 {} 가 필요합니다! css 내용을 품고 있는 객체도 JavaScript이므로 아래와 같이 쓸 수 있습니다!

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

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

◾ React 구성 요소 & 주요 개념

🧱 Component

: 리액트가 레고라면 컴포넌트는 블록 입니다! 그러므로 우리는 리액트로 만들어진 웹페이지를 봤을 때 블록으로 잘 쪼개는 연습이 정말 많이 필요합니다!!

예를 들어 아래와 같은 페이지는

<Header/>
  <Container>
      <Title/>
      <Search />
      <Menu />
  </Container>
<Footer/>

위의 코드 처럼 components를 나눠 볼 수 있습니다!

🧪 State & Props

: 간단하게 말하면 state는 한 컴포넌트 내부에서 사용되는 정보, 즉 data이고 그 component내부에서만 생성과 수정이 가능합니다! 하지만 props는 부모로 부터 받은 상태(data)이므로 자식 컴포넌트는 수정이나 삭제를 할 수 없어요😂
: class형 component에서 간단하게 살펴보면 아래와 같이 state와 props가 사용됩니다!

• 부모 component에서 자식 component로 state(여기서는 list라는 key값으로)를 넘겨주고

render() {
    // this 키워드를 통해 state에 접근할 수 있어요.
    console.log(this.state);

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

• 자식 component(여기서는 BucketList)에서 props로 받아서 사용할 수 있습니다!!

const BucketList = (props) => {
    
    console.log(props);

    // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
    return (
        <div>
            버킷 리스트
        </div>
    );
}