ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 221202. react.js, VSCode, node.js
      스타터스 백엔드 3기 2022. 12. 2. 19:36

      하루입니다.
      MyApp.js, Var.js, Expression.js, Calculation.js, ArrowFunction.js, ClassSyntax.js, GreetingClass.js



      리액트 개요

      • 자바스크립트의 활용이 많아지면서 라이브러리가 등장했다.
      • jquery.js가 대표적이다. dom과 event를 간결하게 처리하는 표현이 특징이다.
      • react.js, vue.js, angular.js는 하나의 모듈 안에 html, js, css를 모두 포함해서 표현한다.
      • 이클립스와 톰캣과 jdk!
      • vs code와 node.js와 리액트!

      • 하나의 파일 안에 html, js, css를 묶어서 component로 만든다.
      • jsx, babel 컴파일러, class로 객체 선언, 화살표 함수, let, const
      • 공통형식의 태그를 미리 구현하고, 다른 부분은 매개변수로 전달하여처리한다.
      • 1개 형식의 태그를 여러번 사용 가능하다. 재활용 가능하다.
      • 함수, 생성자, class 정의를 알아야 한다.
      • 리액트는 view 요소를 담당한다. 재사용이 가능한 라이브러리이다.

      • 구글의 앵귤러 ... 갓슈
      • 페이스북의 리액트
      • 구글의 뷰


      실습

      node.js라는 서버 설치

      • 위치 설정만 하면 끝!
      • 우리는 이제 톰캣, 노드 서버 있다.
      • 노드는 리액트 전용으로 사용할 것.



      cmd 명령창

      • C:\Users\user>set path 로 경로에 nodejs 있나 확인
      • C:\Users\user>node -v v18.12.1
      • C:\Users\user>npm -v 8.19.2 (뭔가 알아서 해준다 아래에 리액트 앱도 xrate 해 줌)
      • npm install -g create-react-app
      • C:\Users\user>mkdir c:\sba\react2
      • C:\Users\user>cd c:\sba\react2 이동
      • c:\sba\react2>create-react-app hello-react
      • Creating a new React app in c:\sba\react2\hello-react.
      • cd hello-react
      • npm start




      노드js 다운로드 하는 곳




      숨김 파일 보는 법

      우와!!!!!!! 우와!!!!!!!!!! 우와!!!!!!! 우와!!!!!!!!!! 우와!!!!!!! 우와!!!!!!!!!! 우와!!!!!!! 우와!!!!!!!!!! 우와!!!!!!! 우와!!!!!!!!!!
      포트넘버 3000!!!!! 톰캣과 다른 걸 알 수 있다!!!!!!!!!!!!!!!!!!!


      -

      • SPA : single page application . 모든 걸 한 페이지에서 보여주마!
      • index.html 은 <body />안에 <div id="root"></div>가 있다.
      • <div id="root">이 안에 모든 걸 적는다. </div>
      import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 태그마냥 import한 App을 사용하고 있다.
// 여기 내용은 App.js에서 보여주고 있고, App.js의 css는 ./App.css에서 하고 있다.



      JSX

      • javascript jsx는 문자열도, html도 아니나 유사하다.
      • reack 문법으로 자바스크립트를 확장한 문법이다.
      • React.createElement의 매개변수로 활용된다.
      • function App() { return () } 에서, return 값은 jsx이다.
      • jsx를 js 문장으로 해석하는 건 바벨 컴파일러이다.

      JSX와 html의 차이점

      • jsx내부 = return문 내부라는 뜻임
      • 태그는 반드시 소문자로 작성한다.
      • 종료태그는 필수이다.
      • 모든 JSX결과물은 단일함수 1개여야 한다.
      • return에 여러 줄이 들어간다면, ( 괄호 안에 적어야 한다. )
      • 주석은 {*/ /*} 형식이다.
      function A() {
	기능 구현;
}

// 이름은 같은 게 좋다. 필수는 아니지만 권장.
export default A;




      VSCode 설치

      C:\sba\Microsoft VS Code



      Korean Language Pack for Visual Studio Code

      </a> 하나 안 적었다고 화면 전체에 오류를 띄워준다. (치사해요)



      리액트

      const root = ReactDOM.createRoot(document.getElementById('root'));  건드리지 말아용
      • export defalut App;   :    my.js 안의 함수를 외부로 내보내겠다는 뜻이다.
      • import App from './my'
      • public/index.html과 src.index.js의 껍데기 (위치?) 는 절대 변경하지 말 것

       

      • 리액트의 function은 반드시 html 태그를 return한다. 
      • 소문자 태그를 사용한다.
      • 첫글자 대문자, 합쳐진 거 대문자 MyApp 이런 식으로 적는다.
      • 반드시 태그를 끝내야 한다. <a /> <App />

       

      • 터미널 열고, npm start 한다. port 번호를 다른 곳에서 쓰고 있을 경우 y를 누르면 새로운 포트번호로 열어준다.
      • 신기하다 ... 알아서 컴파일하고 실행시켜준다.
      • 말 그대로 다른 파일을 태그 쓰듯이 사용한다. 이래서 대세인가?
      • 내가 만든 function을 export하고, 사용하고 싶은 부분에서 import한다.
      import MyApp from './MyApp';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MyApp />
    <App />
  </React.StrictMode>
);

// 밑의 function을 export한다. <MyApp />로 import해서 사용한다.

------------------------------

MyApp.js
function MyApp() {
    return <h1>return test</h1>
}

export default MyApp;


      return jsx의 기본적인 사용 방법

      // 아래 코드는 h1, p라는 두 가지 태그 리턴해서 오류 발생한다.
return <h1>return test</h1><p>2개 이상의 태그를 리턴합니다.</p>

// 아래처럼 <div></div>로 묶으면 하나의 태그를 반환하니까 괜찮다.
return <h1>return test</h1><p>2개 이상의 태그를 리턴합니다.</p>

// 태그가 많다면 ( ); 안에 넣어야 한다.
function MyApp() {
    return (<div>
        <h1>return test</h1>
        <p>2개 이상의 태그를 리턴합니다.</p>
        <img src="logo192.png" alt="react"/>
        </div>);
}



      export와 import 

      export default Calc;

이렇게 내보내도

import Calculator from './Calculator';
<Calculator />

이렇게 받을 수 있다. 아마 모듈에서 한 번에 하나의 내보내기만 되니까 그런 듯?

      주석

      • 매우 특이하게 생겼다.
      • return 내부의 주석은 {/* 내용 */}
      • return 외부의 주석은 // 자바스크립트 주석이다.
      {/* <p>2개 이상의 태그를 리턴합니다.</p> */}



      리액트의 변수

      변수는 <p>{ str2 }</p> 형식으로 사용한다.

      function Var() {
    let str1 = "리턴문 테스트";
    
    return (
        <div>
            <h1>{str1}</h1>
        </div>
    )
}


      • return문 안에서 if문 사용 불가하다. 반복 블록도 없다.
      // index에 랜덤한 수를 넣는다. 원래 범위가 0.0 ~ 1.0이라서 *3 해준다.
// 2.3 이런 식으로 나올 수 있어서 parseInt() 함수를 사용했다.
let index = parseInt(Math.random() * 3);

return (
	<div> if(index < 3) {
    	<h1> {index = 3} </h1>
     	  }
    </div>
);					// 불가능하다. 통째로 출력된다.
// return 내에서 식을 사용하는 게 아닌, 상단에서 계산 후 값을 담아 사용하자.


      • return 안에서 조건문 사용하고 싶다면 삼항연산자를 사용하자.
      return(
    index === 0 ? <h1>{insa1}</h1> : 					
    index === 1 ? <h1>{insa2}</h1> : <h1>{insa3}</h1>	
);

반환 (
	인덱스가 0과 같니? 그러면 insa1을 출력하고 :
    아니면 인덱스가 1과 같니? 그러면 insa2를 출력하고 : 아니라면 insa3을 출력해
);


      리액트의 스타일 지정 (CSS)

      • 객체로 정의한다. 스타일 지정하는 것 자체가 객체로 전달된다.
      • {{ color: "blue }} 와 같은 형태이다.

      <h1 style={{color:"blue", border:"2px solid pink"}}>첫번째 방법</h1>  // {{}}

let style1 = {color:"pink", backgroundColor:"silver"}; 				
<h1 style={style1}>두번째 방법</h1>			 	    // {}


      (함수로 생성한 컴포넌트?)

      함수(컴포넌트?) 호출하면서 값 전달하기

      • 이 함수는 <Calculator su1="10" su2="10"/> 의 형태로 호출되었다.
      • 파라미터를 받기 위해서는 함수에도 매개변수를 설정해야 한다. 굳이 param이 아니라도 상관 없다.
      • param은 객체이고,매개변수.들어있는 거 이름 <- 이렇게 하면 값을 꺼낼 수 있다.
      • 여기서 값은 string 형태이기 때문에 parseInt() 를 사용하여 형변환 한다.
      • { su1 + su2 } 는 30, { su1 } + { su2 } 는 10 + 20 으로 출력된다.
      [ index.js ]

import Calculator from './Calculator';

root.render(
  <React.StrictMode>
    <Calculator su1="10 su2="20"/>
  </React.StrictMode>
);

--------------------------------------

[Calculator.js]
function Calc(param) {      // <Calculator su1="10" su2="10"/>
    // param.su1 = 10 꺼낼 수 있다.
    let su1 = parseInt(param.su1);
    let su2 = parseInt(param.su2);

    return (<div>
        <h1 style={style1}>{su1} + {su2} = {su1+su2}</h1>
    </div>)
}



      리액트에서 컴포넌트를 정의하는 법

      1. 화살표함수
      2. 클래스 선언 형태

      그런데 컴포넌트가 정확히 뭔지 잘 모르겠다. 함수 형태로 선언된 재활용 가능한 모듈 같은 느낌인 건가?

      컴포넌트

          <Calculator su1="2.9" su2="2.9"/>
          <Greeting />
      이게 컴포넌트임.
       
       

      화살표함수

      • 이젠 익숙해짐!
      • 아니이름이없는데어캐사용해요이걸
      • 어카긴요변수에넣어서쓰세요아니면자체를변수로넣던가왜냐면js는함수도변수로받거든요
      • 이벤트에서많이쓰여요
      이 코드를 화살표 함수로 바꿔봅시다!
function Arrow() {
    // 지역변수
    // 실행문장
    return (<h1>화살표함수</h1>);
} 

() => (<h1>화살표함수</h1>);
// 이름이 없는데 어떻게 사용해요

const a1 = () => (<h1>화살표함수</h1>);
// 어떡하긴요 변수에 넣어야죠 ...

       


      리액트 클래스(컴포넌트?)의 기본 문법

      • 이 중 하나라도 빠지면 안 된다.
      • 클래스를 만들어서 컴포넌트 상속을 받는다.
      • 컴포넌트, 객체, 클래스, 오버라이드(재정의?) ...
      • 이 클래스는 리액트의 컴포넌트를 상속받았다는 걸 나타내기 위해서 React.Component를 임포트했다.
      • render()라는 것도 필수다. 안에서 리턴을 정의하자. jsx를 리턴하는 메소드이다.
      • 이 방식은 매개변수 받는 곳이 없다. constructor(param){ } 을 사용하자.
      import React from "react";

class Employee extends React.Component{
    render() {
        return();
    }
}



      리액트에서 이벤트 처리하는 법

      1. 함수 방식으로 정의

      const GreetingClass = () => {
    const welcome = () => {alert("안녕하세요!")}
    return(<input type="button" value="인사" onClick={welcome}/>);
}


      2. class 방식으로 정의

      class GreetingClass extends React.Component{
    render() {
        const welcome = () => { alert("안녕하세요!")}
        return(<input type="button" value="인사" onClick={welcome}/>);
    }
}



      그런데 여기서 ... alert만 뜨게 하는 게 아니라 html의 값을 바꾸고 싶다면 어떻게 해야 할까? 이미 html은 정의되어있고, 제이쿼리나 자바스크립트의 방식으로는 동작하지 않는다. this도 존재하지 않는다. 왜냐면 jsx라서 DOM 구조가 없기 때문이다. 앞으로 이벤트가 발생한 그 객체라는 뜻은 ev 이다.

      엥 vscode에서 통째로 복붙한 건데 이게 더 예쁘다. 티스토리가 구린 건지 vscode가 예쁜 건지

      1. React.Component를 상속받은 GreetingClass를 class 방식으로 생성한다.
      2. render() { return(); } 을 생성한다.
      3. return 안에서는 식을 사용할 수 없으므로 render의 영역에서 식을 세우자.
      4. 익명 함수를 화살표함수 방식으로 만든다. alert(ev.target.value + "안녕하세요!"); ev.target.value = "변경"
      5. 위는 alert창의 value를 이벤트가 일어난 타겟의 value, 여기서는 "인사" 라는 값을 읽어온다. "인사안녕하세요!" 가 된다.
      6. 다음은 "인사"라는 값을 "변경" 으로 바꾼다.
      7. 익명함수를 사용하기 위해 const welcome 이라는 변수에 선언하고, onClick에서 변수 형태로 넣는다.

      class GreetingClass extends React.Component{
          render() {
              const welcome = (ev) => {
                  alert(ev.target.value + "안녕하세요!");
                  ev.target.value = "변경"
              }
             
              return(<input type="button" value="인사" onClick={welcome}/>);
          }
      }


      완료!




      리액트 처음 배웠는데 되게 재밌었다 ! 무엇보다 새로고침 안 하고도 바로 값이 바뀌는 게 가장 좋았다. 원래 화살표함수를 이해 못 했었는데 어느정도 이해 후 사용하니까 왜 사용하는지, 어떻게 편한지 알 수 있었다. 다만 JS, 제이쿼리, 리액트의 문법이 조금씩 달라서 선택자나 , ; : 사용에 주의해야겠다는 생각이 들엇다. 사실 제이쿼리 하면서 . ; # 때문에 삽질한 게 한두번이 아님 ...

      과제 없으니까 주말에 강의 볼 수 있겠다! 복습이랑!

      이번 주 끝!

      하루 끝!

      끝!




      '스타터스 백엔드 3기' 카테고리의 다른 글

      !!!!!! 왜 int j = i --;와 int j = --i; 가 다른지 이해했다!!!!!  (1) 2022.12.04
      유데미 스타터스 취업 부트캠프 3기 - 백엔드 2주차  (0) 2022.12.02
      221201. JS, JQUERY  (0) 2022.12.01
      계속 발생하는 mylocation.html:20 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at success 에러  (0) 2022.11.30
      1129. JS (시계, 계산기, 이벤트, 무명함수, 화살표함수)  (0) 2022.11.29

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바