프론트엔드의 꽃, 리액트 1주차 정리 (Javascript 기초, JSX, Component)

웹의 기초 개념

웹의 동작 개념

HTML을 받는 경우

• 브라우저 : 서버 API에 요청을 보내서 받은 HTML 파일을 그려줌

데이터만 받는 경우

• JSON 형식의 데이터를 받아와서 페이지에 끼우게 됨

클라이언트와 서버

• 클라이언트 : 우리가 웹사이트를 보는 도구

• 서버 : 우리가 보는 웹사이트에 뿌려줄 것을 만들어 클라이언트에 전달해주는 역할

 

서버리스(serverless)

• 서버의 사양, 네트워크 설정 등이 되어있는 서버를 빌려서 사용함

• 직접 서버를 구축하기 위한 인프라 작업을 하지 않아도 됨

 

DOM (Document Object Model)

• HTML 단위 하나하나를 객체로 생각하는 모델

• 트리구조

 

---

 

Javascript 기초

Class

• 객체를 정의하기 위한 상태, 함수로 구성

class Cat {
  constructor(name) { //생성자
		this.name = name; 
	}

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

class MyCat extends Cat {
  constructor(name, age) {
		super(name); //부모 클래스의 생성자
		this.age = age; 
	}
	
	showName(){ //오버라이딩
		return '내 고양이 이름은 '+super.showName()+'입니다.';
	}
	
	showAge(){
		console.log('내 고양이는 '+this.age+'살 입니다!');
	}
}

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

 

변수 선언

• var : 함수 단위 변수

• let : block 단위 변수 (재할당 가능)

• const : block 단위 변수 (재할당 불가)

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;
	
	if(a === 0){ //block 기준 : 중괄호 {}
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}

	console.log(a, b, c);
}

• 실행 결과 c만 1로 변하고 a, b는 바뀌지 않음

 

=, ==, ===

• = : 변수에 값 할당

• == : 동등 연산자, 유형을 비교하지 않는 등차

• === : 일치 연산자, 유형도 비교하는 등차

💡

0 == "0" → true 반환 0 === "0" → false 반환

 

Spread 연산자

• 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 역할

• 점 3개 (...) → Spread 문법

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

 

Array 내장 함수

1. map

• 배열에 속한 항목을 변환할 때 사용

• 변환한 값을 새로운 배열로 만들어줌 (원본 배열은 변화 X)

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

2. filter

• 특정 조건을 만족하는 항목만 골라서 새로운 배열로 만들어줌

const array_num = [0,1,2,3,4,5];
const new_array = array_num.filter((array_item) => {
	return array_item > 3;
});

3. concat

• 배열과 배열을 합치거나, 배열에 특정한 값을 추가해주는 함수

const array_num01 = [0,1,2,3];
const array_num02 = [3,4,5];
const merge = array_num01.concat(array_num02);

• concat은 중복 항목을 제거해주지 않음 → Set을 이용하면 가능

const array_num01 = [0,1,2,3];
const array_num02 = [3,4,5];
const merge = [...new Set([...array_num01, ...array_num02])];

 

• Quiz_Array 내장 함수

  1. 아래 for문을 map으로 바꾸기

  const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
  
  let count = 0;
  for (let i = 0; i < animals.length; i++) {
  	let animal = animals[i];
  	if (animal === "고양이") {
  		count += 1;
  	}
  }
  console.log(count);

  • 정답

    const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
    
    let count = 0;
    animals.map((animal) => {
    	if (animal === "고양이") {
    		count += 1;
    	}
    });
    console.log(count);

   

  1. 아래 코드를 filter 이용하도록 바꾸기

  const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];
  
  let cats = [];
  for (let i = 0; i < animals.length; i++) {
  	let animal = animals[i];
  	if (animal.indexOf("고양이") !== -1) {
  		cats.push(animal);
  	}
  }
  console.log(cats);

  • 정답

    const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];
    
    let cats = [];
    const cats = animals.filter((animal) => {
    	return animal.indexOf("고양이") !== -1;
    });
    console.log(cats);

     

   

  1. 아래 두 배열을 하나로 합치기

  const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
  const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];
  
  const animals = dogs.concat(cats);
  console.log(animals);

   

  1. 딸기는 몇 개일까? (map 이용)

  let fruit_list = ['사과','감','감','배','포도','포도','딸기',
  '포도','감','수박','딸기']
  
  let count = 0;
  for (let i = 0; i < fruit_list.length; i++) {
  	let fruit = fruit_list[i];
  	if (fruit == '딸기') {
  		count += 1;
  	}
  }
  console.log(count);

  • 정답

    let fruit_list = ['사과','감','감','배','포도','포도','딸기',
    '포도','감','수박','딸기']
    
    let count = 0;
    fruit_list.map((fruit) => {
    	if (fruit == "딸기") count += 1;
    });
    console.log(count);

     

   

 

---

 

React 프로젝트 만들기

NVM(Node Version Manager)

• Node.js의 버전 관리자

• 다양한 버전을 마음대로 골라서 설치할 수 있게 해주는 툴

• 설치된 NVM 버전 확인

nvm --version

 

Node.js 설치하기

• 설치하기

nvm install [설치할 버전]

 

• 정상적으로 설치되었는지 확인

nvm ls //nvm으로 설치한 노드 버전 리스트 확인
node -v //노드 버전 확인

 

• 사용 중인 노드 버전 바꾸기

nvm use [사용할 노드 버전]

 

Yarn 설치하기

• NPM(Node Package Manager) : 무수히 많은 third-party 패키지를 활용할 수 있게 해줌

• NPM과 유사한 도구 : Yarn→ 둘 다 프론트엔드 의존성을 관리하기 위한 패키지 매니저
• → 이미 완성된 패키지를 가져다 쓰기 편리하도록 도와줌

• NPM으로 Yarn 설치하기

//npm install [옵션] [설치할 패키지 이름]
npm install -g yarn
//-g : 컴퓨터 전체에서 쓸 수 있게 하는 옵션
yarn -v //yarn 버전 확인

 

• Yarn으로 패키지 설치하기

yarn add [옵션] [설치할 패키지 이름]

 

CRA(create-react-app)으로 시작하는 리액트

• Yarn으로 CRA 설치

yarn add global create-react-app

 

• 리액트 프로젝트 만들기

//yarn create react-app [프로젝트 이름]
yarn create react-app week-1

 

• 리액트 앱(프로젝트) 실행하기

//프로젝트 폴더로 이동한 후 실행
cd week-1
yarn start

 

---

 

JSX

JSX란?

• 리액트에서 뷰를 그리는 방법→ JSX 문법을 이용해서 React 엘리먼트 생성, DOM으로 렌더링시켜서 그리기

• 자바스크립트 안에서 HTML 태그 같은 마크업을 넣어 뷰 작업을 할 수 있음

const start_half = <div>
	<h1>안녕하세요</h1>
</div>;

 

JSX 규칙

1. 태그를 반드시 닫기

2. 반드시 1개의 엘리먼트를 반환하기

return (
	<div className="App">
		<p>안녕하세요</p>
		<input type="text"/>
	</div>
);

1. JSX에서 자바스크립트 값을 가져오기 위해서는 중괄호를 사용

const cat_name = 'perl';
return (
	<div>
		hello {cat_name}!
	</div>
);

1. 태그 내에서 클래스 명을 정할 때 class 대신 className을 사용

<div className="App">

1. 인라인으로 style 넣기

//중괄호를 두 번 쓰는 이유 -> 딕셔너리도 자바스크립트이기 때문
<p style={{color:'orange', fontSize:'20px'}}>orange</p>

//또는 스타일 딕셔너리를 변수로 선언해서 사용
function App() {
	const style = {
		color: 'orange',
		fontSize: 20px'
	};

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

 

---

 

Component

State

• Component가 가지고 있는 데이터

• 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터

 

Props

• Component가 부모 Component로부터 받아온 데이터

• Props로 받은 데이터는 수정할 수 없다

 

함수형 Component

BucketList.js

import React from 'react';

const BucketList = (props) => {
	return (
		<div>
			버킷 리스트
		</div>
	);
}

/*
//또는 이렇게 작성할 수 있다.
function BucketList(props) {
	return (
		<div>버킷 리스트</div>
	);
}
*/

export default BucketList;

• return을 통해 Component가 뿌려줄 UI 엘리먼트를 반환

• 함수형 Component를 export하여 다른 컴포넌트에서 이 Component를 사용할 수 있도록 함

 

App.js

import React from 'react';
import BucketList from './BucketList';

function App() {
	return (
		<div className="App">
			<h1>내 버킷리스트</h1>
			<BucketList/>
		</div>
	);
}

export default App;

 

클래스형 Component

💡

class 클래스명 extends React.Component

App.js

import React from 'react';
import BucketList from './BucketList';

class App extends React.Component {
	constructor(props){
		super(props);
		this.state = { //state 정의
			list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
		};
	}

	render() { //render 함수 안에 리액트 엘리먼트 넣기
		return (
			<div className="App">
				<h1>내 버킷리스트</h1>
				<BucketList/>
			</div>
		);
	}
}

export default App;

 

Component간의 데이터 전달

• 함수형 Component에는 state가 없음 (React hook을 이용하면 state 사용 가능)

💡

<컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/>

App.js

render() {
	return (
		<div className="App">
			<h1>내 버킷리스트</h1>
			<BucketList list={this.state.list}/>
		</div>
	);
}

 

 

Uploaded by Notion2Tistory v1.1.0