React-1일차

학습한 내용

React/ 실습 - 리액트 작동 원리와 기초(문법, 컴포넌트)

React

• 프런트엔드 프레임워크 중 하나
• 페이스북 개발에 사용한 기술
• 화면 출력에 특화된 프레임워크
• 컴포넌트를 조립하여 화면 구성
• 출력 속도가 빠름
• 기존 방법보다 더 객체화 해놓으니깐 한 파일에 기능이 담겨 있는 것을 가져오는 것보다 재사용이 더 좋다.
• 웹 프로그램을 함에 있어 생산성을 높이고, 속도를 빠르게 하는 이점이 있음

Nodejs 설치

• https://nodejs.org/en/
• 위 사이트에서 recommanded for most users 설치
• https://github.com/coreybutler/nvm-windows/releases
• 최신버전 1.1.9 nvm-setup.zip 압축 해제 후 설치
• 밑에 방법으로 진행했음
  1) 명령프롬프트 실행(관리자 권한)
  2) nvm -v / 버전 확인하기
  
  3) nvm install 16.15.1 / nodejs설치
  
  3-1) nvm use 16.15.1
• 여러 버전이 설치되어 있는 경우, 해당 버전을 사용할거라는 명령어
  4) node -v / nodejs 설치 확인
  
  5) npm -v / npm 확인
  
  6) React 설치 한 경로로 이동
• cd\ : 하면 c드라이브로 이동
• cd react : 내가 만든 폴더로 이동
• cd.. : 상위 폴더로 이동할 때

프로젝트 시작하기

1) 프로젝트 설치하고 싶은 경로로 이동
2) 프로젝트 설치

• npx create-react-app 폴더명
• 학습 폴더명 : 0624_proj1
• Happy hacking 나오면 설치 완료
  
  3) code . / 프로젝트 열기
• 해당 폴더로 접속 후 명령어 입력
  
• VS code가 열리고 탐색기 확인
  
  파일 구조를 보면
• node_modules : 해당프로젝트에 대한 라이브러리가 저장
• public : 정적 파일을 넣는 디렉토리(html 파일, img등)
• Src폴더에 코드의 대부분이 들어 감(index.js, 리액트 컴포턴트 같은 js파일, css파일 등)

4) npm start으로 프로그램 실행

• app.js파일에 접속 후 터미널 열기
• npm start 명령어 입력
  
  
• 시간이 걸리지만 구동 되는 모습을 확인 가능

*spa

• index.html파일 하나에다가 자바 코드가 필요한 정보를 그려준다.
• 새로운 페이지로 넘어갈 때마다 html, css, js소스를 가져올 필요가 없어서 새로고침이 필요없다.
• 그래서 사용자에게 끊김없는 웹 앱을 줄 수 있음
• 하지만, 처음에는 필요한 리소스를 다 가져와야 하기에 초기 구동 속도가 느리다.
• react는 spa형식

실습.
app.js에서

function App() {
  return (
    <div>
		<div>Hello World!</div>
  </div>
  );
}

• html파일을 수정해서 고치는 것이 아닌 자바스크립트 안에서 수정
• 초기 구동만 느릴 뿐, 수정하면 바로바로 바뀌는 모습을 확인 가능

플러그인 설치

• reactjs code snippets
  

컴포넌트

• 하나의 파일에 자바스크립트와 HTML을 동시에 작성
• 확장자 jsx : javascript + xml
• 컴포넌트 이름은 반드시 대문자로 시작
• 컴포넌트와 일반 HTML 태그를 구별하는 방법은 태그가 대문자로 시
  작하는지 여부
• 소문자로 시작하면 일반 HTML 태그로 분류
• 반드시 첫 글자는 대문자로 함

실습. 컴포넌트 만들기

• src - component 폴더 만들기
• component - TodaysPlan.jsx 파일 만들기
• rcc + enter 하면 기본적인 골격 나옴

import React, { Component } from 'react';

class TodaysPlan extends Component {
    render() {
        return (
            <div className="message-container">놀러가자!!!                
            </div>
        );
    }
}

export default TodaysPlan;

• 저장 후 app.js로 이동
• 컴포넌트 불러오기

import TodaysPlan from './component/TodaysPlan';

function App() {
  return (
    <div className="body">
      <TodaysPlan></TodaysPlan>
    </div>
  );
}

실습. box 만들기

• app.js

function App() {
  return (
    <div>
      <div className="box">
        Box1
        <p>한국</p>
      </div>
      <div className="box">
        Box2
        <p>미국</p>
    </div>
    <div className="box">
        Box3
        <p>중국</p>
    </div>
  </div>
  );
}

• app.css : 스타일 적용하기

.box{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

• 위 방법은 컴포넌트를 만든 것은 아님

실습. box만들기 - 컴포넌트 활용

• Box1.jsx 컴포넌트 만들기

class Box1 extends Component {
    render(props) {
        return (
            <div className="box">
                Box1
                <p>{this.props.name}</p>
            </div>
        );
    }
}

• app.js 수정

import Box1 from './component/Box1'

function App() {
  return (
    <div>
      <Box1 name="한국"></Box1>
      <Box1 name="미국"></Box1>
      <Box1 name="중국"></Box1>
  </div>
  );
}

• 똑같이 나오는 것을 확인 가능

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법 작성

학습 소감

react를 배우는 첫 시간을 가졌는데, 처음에는 웹 페이지를 수정하기 위해 js, css, jsx를 왔다 갔다 하는 것이 힘들었다. 강사님 말대로 아직 눈에 안 익어서 그런 것 같다. 꾸준한 실습과 복습을 통해 눈과 손에 익히도록 노력해야 겠다.