React - #1 개요

---

등장배경

1. 직관적이지만 너무 긴 자바스립트 문법
   

2. JS와 HTML이 가진 분리감
   

3. 리렌더링이 잦은 동적인 모던 웹
   

---

React란?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
(UI를 위한 JS 라이브러리)

• Library
  -어플리케이션 개발 시 필요한 기능을 모아둔 소프트웨어 (기능만 가져다 사용)
  -버전이 업데이트 되더라도 이전 버전과 호환이 잘 됨

• Framework
  -어플리케이션 개발 시 제공된 소프트웨어 환경(만들어진 환경에서 규칙을 지켜가며 사용)
  -버전이 업데이트 되면 이전 버전과 호환이 잘 안됨

• User InterFace(UI)
  -사용자와 사물 또는 시스템, 기계 등 사이에서 의사소통을 할 수 있도록 만들어진 물리적, 가상적 매개체

• Jordan Walke
  페이스북(메타) 소프트웨어 엔지니어
  

• 계속해서 상승하는 React의 인기
  

---

환경설정

1. Node.js 설치
   

• 터미널
  node -v → 노드 버전 확인
  npm -v → npm 버전 확인
  npx create-react-app (생성할 프로젝트 폴더 이름) → 리액트 프로젝트 생성
  cd (폴더 이름) → 디렉토리 변경
  npm start → 리액트 실행
  
  
  npm - 패키지 관리 도구
  npx - 패키지 실행 도구

---

기본구조

• SPA(Single Page Application)
  서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트
  

---

JSX(JavaScript + XML)

JavaScript에 XML을 추가한 확장문법
하나의 파일에 HTML과 JS를 동시에 작성한다.
→ document 객체 별도 접근 X
→ 가독성이 좋고 기능별 분류가 쉬움

---

JSX 작성 규칙

1. 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
   

2. 자바스크립트 표현식을 사용할 수 있다.
   

3. 자바스크립트 표현식에서 if문 대신 조건부 연산자를 사용한다.(표현식 안에서 if문 사용 불가 / 삼항연산자로 대체 : ===)

• 조건이 하나일 때 - &&
• 조건이 참, 거짓일 때 - 조건 ? T : F
• 조건이 여러 개일 때 - return문 위에서 if문 사용
  

4. 인라인 스타일링 시, 객체 형태로 작성한다.
   

5. class가 아닌 className으로 사용한다.
   

6. 태그를 반드시 닫아야 한다.(콘텐츠(내용)이 없어도 끝태그까지 작성)
   

7. HTML태그의 첫 글자는 반드시 소문자로 생성

---

실습

const App2 = ()=>{
    /*
    (1) 사용자에게 이름을 입력받는다.
    (2) 현재 날짜를 가지고 온다.
    (3) 조건에 따라 계절을 판별한다.
        3~5월 : 봄
        6~8월 : 여름
        9~11월 : 가을
        12월~2월 : 겨울
    (4) 형태에 맞춰서 화면에 보여준다.
        <h1>YYYY년 MM월 DD일</h1>
        <hr>
        <h2>OOO님 지금은 OO입니다.</h2>
    */

    let name = prompt('이름을 입력하세요.');
    let toDay = new Date();
    let season = '';
    if(toDay.getMonth>2 && toDay.getMonth<6){
        season = '봄'
    }else if(toDay.getMonth>5 && toDay.getMonth<9){
        season = '여름'
    }else if(toDay.getMonth>8 && toDay.getMonth<12){
        season = '가을'
    }else {
        season = '겨울'
    }

    return(
        <div>
            <h1>{toDay.getFullYear()}년 {toDay.getMonth()+1}월 {toDay.getDate()}일</h1>
            <hr/>
            <h2>{name}님 지금은 {season}입니다~!💗</h2>
        </div>
    );
}

export default App2;

---