react 사용이유

React?🍓

🏳️ React란 javascript의 라이브러리이다.

JSX?

🏳️ const hi = < 태그>Hi< 태그>;

위의 코드는 JS도 HTML도 아닌 javascript syntax extension라고 하는 JS의 확장버전이다.

.js 파일에서 사용할 수 있고 별도의 컴파일 과정을 거쳐야지만 js문법으로 변환하여 브라우저가 인식할 수 있다.

JSX는 어떤 태그라도 self closing tag가 가능함. ex) div /div => div /

소괄호로 감싸주고 무조건 하나의 태그안에 중첩요소를 담아주어야한다.

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));

DOM node에 추가되어 화면에 랜더링되려면 위와같이 작성해준다. JS의 appendchild 느낌인것 같다.

Component와 Props

🏳️ 1. Component

component(컴포넌트)란 재사용 가능한 UI 단위이다. ( 함수랑 비슷하다고 생각하면 편함 )

🏳️ 2. Props

이러한 component(컴포넌트)의 매개변수 역할을 하는것을 Props라고 한다.

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="wecoder" />
      <Welcome name="John" />
      <Welcome name="Sara" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Welcome이라는 컴포넌트를 App이라는 컴포넌트에서 사용하는 예시이다. 이렇게되면 App은 부모 Welcomde은 자식이라는 관계가 형성된다.

Component의 State

🏳️ State : 타입은 Object이고 화면에 보여줄 정보를 가지고 있는 컴포넌트의 상태값이다.

props와 다른점이있다면 props는 부모에게서 받아야만 사용할 수 있다면 state는 컴포넌트 내에서도 정의하고 사용할 수 있다.

function Button(props) {
  const [isClicked, setIsClicked] = useState(false);

  return (
    <button className="btn" onClick={() => setIsClicked(!isClicked)}>
      {isClicked ? "좋아요" : "싫어요"}
    </button>
  );
}

버튼을 누를때마다 값이 바뀌는 간단한 예시.

리액트를 왜 사용하는가?

1. 모바일앱으로 발행이 쉽다.
2. 앱 처럼 뛰어난 UX
3. 그냥 웹사이트보다 비즈니스적으로 강점이있다.

자 이제 시작해보자.

1. node.js를 최신버전으로 깔아준다.
2. 폴더를 만들고 vscode로 킨 후 ➡️ 터미널창에 ‘npx create-react-app <프로젝트 이름="">' 을 친다.
3. 터미널에 ‘npm start’ 입력 후 예시 페이지가 나오는지 확인

---

기초 설명🚩

‘node.js’를 설치한 이유 ➡️ create react app을 사용하기 위해 -> node.js를 깔면 npm이라는 툴을 사용가능

public->index.html (메인페이지 ) ➡️ ‘src->app.js’를 끌어다 사용하고있다.

package.json ➡️ 설치한 라이브러리 목록

node_modules ➡️ 라이브러리 집합소

public ➡️ static 파일 보관함

src ➡️소스코드 보관함

src-index.js ➡️ app.js와 메인페이지를 이어줌 root

App.js에서 return안에 쓰는 문법은 HTML처럼 생긴 JSX이다.

데이터 바인딩은 { }을 사용하여 편하게 사용

---

기초 문법🚩

import 이름 from '이미지 경로'

<img src={ 이름 } />

이미지 업로드하기

<div style={ { color : 'black', fontSize : '30px' } }>asd</div>

style 사용법 ‘-‘을 사용불가하니 카멜형식으로 사용

import React, { useState } from "react"; // 리액트에있는 내장함수를 쓰겠다. state는 변수대신 쓰는 데이터 공간

let [title, titleModify] = useState(["신라면 맛있어", '우유랑 같이 먹어야함']);

<p>{ title[0] }</p>  // '신라면 맛잇어'

ustState 사용 이유 -> app처럼 사용하기위해, 새로고침없이 재랜더링됨, 자주바뀌는 중요한 데이터를 쓰자.

useState함수 사용시 [‘신라면 ..’, 함수] 이렇게 나옴 -> 이것을 신문법으로 a변수에는 ‘신라면…’ b변수에는 함수를 넣음

/* eslint-disable*/

warning을 보기싫을때 쓰면 없애줌

let [like, likeModify] = useState(0)

<span className='like' onClick={ ()=>{ likeModify( like+1 ) } }>🍓</span><p>{like}</p>

// 딸기모양 클릭시마다 숫자가 올라감

onClick은 {}을 사용하고, 그안은 항상 함수여야한다. 그리고 state값을 바꾸고 싶을땐 수정함수를 사용한다.

  function 제목바꾸기() {
    var newArray = [...title];    // var newArray = title (X)
    newArray[0] = '블랙 신라면';
    titleModify( newArray );
  }

  <button onClick={ 제목바꾸기 }>바꿈</button> // 제목바꾸기() (X)

변수에 state를 담을때 그냥 담으면 값을 공유하는 것이다. 즉 원래의 값도 바뀐다. […]을 사용하자

함수를 함수()로 호출하면 바로 실행이므로 클릭시에만 호출할 수 있게 ()를 빼주자.

function Nav() {
  return (
    <div className="black-nav">
       <div>LJH</div>
    </div>
  )
}

function App() {
    return (
    	<Nav></Nav>
    )
}

Component 사용하기

1. 이름은 대문자로 쓰기
2. 하나의 div로 묶어주기 // <></>을 써도됨
3. App 컴포넌트와 같은 위치로 해주기

이렇게되면 App은 부모컴포넌트 nav는 자식컴포넌트가 된다.

자주바뀌는 것들에 사용하자