[FRI] 2022-01-07

React를 사용하는 이유

: 코드를 컴포넌트화해서 컴포넌트를 재사용하기 위함

React 프로젝트 생성하기

1) npx create-react-app my-app
    (my-app말고 다른 폴더 이름 사용해도 됌)
2) cd my-app
3) npm start
4) 필요없는 자동 생성파일 삭제하기

JSX

1. JSX란?

• Javascript에 XML을 추가한 문법
• React 프로젝트를 개발할 때 사용,
  공식적인 자바스크립트 문법은 아님
• 브라우저에서 실행하기 전에 바벨을 사용하여
  일반 자바스크립트 형태의 코드로 변환됌

2. JSX 문법

1. 최상위 부모요소는 1개
2. className으로 클래스를 정의함
3. camelCase 사용함

<div className="newClass"/> Hello </div>

4. 주석

function App() {
	//여기는 js
  return (
    	{/* 여기부터는 jsx */}
		<div>
			<p> 안녕, 2022! </p>
			<p> 잘가, 2021! </p>
		</div>
  );
}

5. { }로 JS를 사용함

import './App.css';

function App() {
	const name = 'minbok!';
  	return (
		<div>
           <p> 안녕, {name}! </p>
		</div>
  );
} 

export default App; 

// 안녕, minbok!

🐱‍🐉 참고
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간]

Fragment

목적

• 시멘틱 마크업을 방해하는 의미없는 div태그 사용 방지
  * <React.Fragment>는 html에 함께 출력되지않음
• index.js 의 <React.StrictMode> 도 div 대용임

사용방법

1) 상단에 모듈을 추가

import React, { Fragment } from 'react';

2) 사용한다

function App() {
  return (
		<React.Fragment>
			<p>배고프다</p>
			<p>돈까스 먹고싶다</p>
		</React.Fragment>
  );
}

3) <React.Fragment>대신에 <></>을 사용 할 수도 있다.

Component

목적

• 가독성 증대
• 재사용성 극대화

컴포넌트 만들기

// -- App.js

function App() {
return (
  <div>
    <Greeting />
    <Time />
  </div>
);
}

// --Components > Greeting.js
// Login.js도 같은 방식으로 만들어주면됌
  
import React from 'react';  // react를 사용하겠다고 명시
import '../App.css';

function Greeting(props) {
    return(
        <React.Fragment>
			<p> 안녕, 2022! </p>
			<p> 잘가, 2021! </p>
        <React.Fragment>
    )
}

export default Greeting;

Props 파라미터

prop란?

• props는 Component를 만들 때 넣어줄 수 있는 속성의 집합,
• Component는 props라는 임의의 입력을 받아 리액트 엘리먼트들을 화면에 어떻게 표시할지 기술함

사용

-- App.js
          
function App() {
  return (
     // 지금은 자식태그가 하나라서 div로 감싸지않아도 됌
      <Hello name='minbok' age='10' />

  );
}

export default App;

import './App.css';
import React, { Fragment } from 'react';

function Hello(props) {
  return(
    <React.Fragment>
      <p>안녕, 난 {props.name}이야!</p>
      <p>만나서 반가워, {props.name}!</p>
      <p>난 {props.age}살이야!</p>
    </React.Fragment>
  ) 
}
          
// 안녕, 난 minbok이야!
// 만나서 반가워, minbok!
// 난 10살이야!

Node.js 업데이트 하기

• node -v : 버전 확인
• npm cache clean -f : npm 캐시 삭제
• npm install -g n : n 플러그인 설치
• n lts : 노드 lts 버전 설치

npm 업데이트 하기

• npm -v : 버전 확인
• npm i -g npm : npm 업데이트
• npm 현재 버전 확인

🐱‍🐉 참고
출처: https://walldaydream.tistory.com/entry/Nodejs-npm-업데이트-하기