[React]2. 컴포넌트

React_02_컴포넌트

 

[리액트 단계]

1. 서버 실행하기

 

 

2. JSX 파일 만들기: 기본 jsx 구조

 

 

3. index.js에서 jsx 파일 import하기: 브라우저에서 보여지는 파일 변경하기

 

[실습1]

//1. 사용자에게 이름 입력받기

var name=prompt("이름을 입력해주세요");

console.log(name);



// 2. 현재 날짜 가져오기

let today=new Date();

console.log(today);



// case A: 연도-월-일 형태 ->toLocaleDateString()

var date=today.toLocaleDateString()

console.log(today.toLocaleDateString());



//case B: 현재 월 ->getMonth()

// *컴퓨터는 숫자를 0부터 세기 때문에 +1를 해야 함

var month=today.getMonth()+1;

console.log(today.getMonth()+1);



let season="";


//3. 조건에 따라 계절 분류

   switch(month){

            case 3,4,5: season='봄'; break;

            case 6,7,8: season='여름'; break;

            case 9,10,11: season='가을'; break;

            case 12,1,2: season='겨울'; break;

        

    }


    return (

        <div>
            <p>{date}</p>

            <hr/>

            <p>{name}님 {season}입니다. 좋은 하루 보내세요</p>

        </div>

    )



}

 

• 터미널 종료: ctrl+c

 

• 새 프로젝트 생성하기

 

[컴포넌트]

1. 함수형 프로그래밍: 순수 함수를 조합하고 소프트웨어를 만드는 방식. 어떻게 할 건지(How) 나타내기보다 무엇(What)을 할 건지 설명하는 선언형 프로그래밍 방식 예)리액트

 

2. 컴포넌트(Component): 리액트로 만들어진 앱을 이루는 최소 단위

• 반복되는 코드를 하나로 묶어서 모듈화한 것

→내가 원하는 코드를 묶어서 마치 하나의 태그처럼 사용

 

 

•  반드시 컴포넌트는 대문자로 시작해야 함: 기존 HTML 코드(DOM 요소)와 구분해야 함

 

 

•  컴포넌트 export(내보내기), import(받아오기) 필수

 

 

3. 컴포넌트 환경설정

• extension: E27+React/Redux/React-Native snippets

 

 

• component 폴더 생성&파일 생성: src-component 폴더 생성-jsx 파일 생성

 

 

4. 컴포넌트 사용법

 

[App.js]컴포넌트 이름을 태그처럼 작성한다. 반복하고 싶은 만큼 작성

[MenuBox.js]화면에 보여줄 코드를 작성한다.

 

5. pops(프로퍼티): 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용

 

1)상위 컴포넌트에서 값을 보내는 방법

     <컴포넌트 이름 key="value"/>

 

2)하위컴포넌트에서 값을 받는 방법

    -컴포넌트는 함수 형태이기 때문에 함수의 매개변수를 통해 값을 받음

    

• 값 받아오기: (props)매개변수

 

• 값 출력하기:  매개변수.key

 

    

• 객체 비구조화 할당: 객체 형태의 속성을 변수로 만드는 것

-props는 객체 형태이므로 {props.key}로 출력해야 하지만

객체 비구조화 할당을 통해 간단하게 코드를 작성할 수 있음

 

-매개변수에 {속성1, 속성2, 속성3…} 작성하고 출력코드는 {속성}으로 작성

 

(매개변수에 props 작성)

 

(매개변수에 속성 작성)