❗React 배우기 전에 쓰는 이유부터 알아야

React 왜 씁니까

1. Single Page Application

자바스크립트로도 만들 수 있는데 코드가 너무 길어지므로 리액트라는 자바스크립트 라이브러리를 설치해서 사용

2. html 재사용 편리
3. 앱개발 가능

React Native, (html, css 문법 약간 다름)

❗리액트 React 설치와 개발환경 셋팅 (2022 ver)

리액트 프로젝트 생성은

• 폴더에 shift + 우클릭해서 ‘여기서 powershell 열기’를 누릅니다.
• 터미널에 입력한다.

npx create-react-app 프로젝트명

• visual studio 폴더 열 때 폴더 안에 폴더로 들어가서 열어야 함
• App.js가 메인페이지임(src폴더 안에 있는)
• 브라우저 미리보기 : npm start

node_modules 폴더 : 라이브러리 코드 보관함

public 폴더 : static 파일 모아놓는 곳

src 폴더 : 코드 짜는 곳

package.json : 프로젝트정보

❗리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개

• html대신 JSX라는 걸 씁니다. jsx는 .js파일에서 쓰는 html 대용품

JSX 문법 1. html에 class 넣을 땐 className

JSX 문법 2. 변수를 html에 꽂아넣을 때는 중괄호 사용 {변수}

href, id, className, src 등 여러가지 html 속성들에도 가능합니다.

변수에 있던걸 html에 꽂아 넣는 작업을 데이터바인딩이라고 합니다.

JSX 문법 3. html에 style속성 넣고싶으면

• style = { } 안에 { } 자료형(객체 자료형 형태)으로 집어넣어야합니다.

{속성명: “속성값”}

<div style={{ color: "blue", fontSize: "30px" }}>글씨</div>

• font-size처럼 속성명에 대쉬기호를 쓸수 없고 모든 단어를 붙여써야해서 붙여쓸 땐 앞글자를 대문자로 치환해야 합니다.
• css파일 열기 귀찮을 때 사용하면 됨
• css파일 쓰려면 상단에서 import

❗중요한 데이터는 변수말고 state에 담습니다

state 만드는 법

1. import { useState }
2. useState(보관할 자료)

보관할 자료는 어느 자료형이든지 상관없음

3. let [작명, 작명]

맨 윗줄에 import { useState } from “react” 하고

원하는 곳에 useState(”보관할 자료”)쓰면 state에 자료를 잠깐 저장할 수 있습니다.

저장한 자료를 나중에 쓰고 싶으면

let [a,b] = useState('남자 코트 추천');

a자리에 state이름을 자유롭게 작명한 다음 자유롭게 사용하면 됨

• 자바스크립트 destructuring 문법

array안에 있는 데이터들을 변수로 쉽게 저장하고 싶으면 쓰는 문법

let [name, age] = ['Kim', 20]

그럼 각각 name = “Kim”, age = 20이라는 변수가 자동으로 생성됩니다.

useState( )를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 array가 남습니다.

데이터1 자리엔 ‘남자 코트 추천’같은 자료가 들어있고

데이터2 자리엔 state 변경을 도와주는 함수가 들어있습니다.

html에 중괄호로 집어넣으면 변수처럼 데이터바인딩이 가능합니다.

변수 말고 state에 데이터 저장해서 쓰는 이유

state는 변동사항이 생기면 state 쓰는 html도 자동으로 재렌더링해줍니다.

state는 상품명, 글제목, 가격 이런 것 처럼 자주 변할 것 같은 데이터들을 저장하는게 좋은 관습임

자주변경될 것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓기

변경할 일이 없는 데이터들, 굳이 html에 표기가 필요없는 데이터들은 그냥 변수에 저장해도 됨

❗버튼에 기능개발을 해보자 & 리액트 state변경하는 법

좋아요 버튼 만들기

onClick 사용법

jsx에서는

<div onClick = { 실행할함수 }>

1. Click이 대문자
2. { } 중괄호 사용
3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는 것

함수명을 넣어도 되고, 직접 함수를 안에 적어도 됩니다.

(매우중요) state 변경하는 법

-등호로 변경금지

-state는 state변경함수를 써서 state를 변경해야함

안그러면 html재렌더링 안됨

두번째 작명한건 state변경을 도와주는 함수입니다.

그거써야 state변경이 가능함

사용법

state변경함수(새로운state)

state변경함수는 ( ) 안에 입력한걸로 기존 state를 갈아치워줌

❗array, object state 변경하는 법

array/object 다룰 때 원본은 보존하는게 좋음

state가 array/object면 독립적 카피본을 만들어서 수정해야 함

[…기존state], {…기존state} 이렇게 하면 독립적인 카피가 하나 생성됨

<button
    onClick={() => {
      let copy = [...글제목];
      copy[0] = "여자 코트 추천";
      글제목변경(copy);
    }}>
    글수정
</button>

state 변경함수 동작원리

state변경함수 특징

기존 state === 신규 state의 경우 변경안해줌

array/object 동작원리

array/object 특징

array/object 담은 변수엔 화살표만 저장됨

❗Component : 많은 div들을 한 단어로 줄이고 싶으면

복잡한 html을 한 단어로 치환할 수 있는 Component 문법

의미없는 div 대신 <></> 사용가능

component 사용법

1. function을 이용해서 함수를 하나 만들어주고 작명합니다.
2. 그 함수 안에 return( ) 안에 축약을 원하는 HTML을 담으면 됩니다.
3. 그럼 원하는 곳에 <함수명></함수명> 사용하면 아까 축약한 HTML이 등장합니다.

이렇게 축약한 HTML 덩어리를 Component라고 부름

미래의 내가 봤을 때 레이아웃을 바로 파악이 가능하니 나중에 관리하기 좋을 것 같음

<Modal></Modal>

function Modal() {
    return (
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    );
  }

Component 만들 때 주의점

1. component 작명할 땐 영어대문자로 보통 작명함
2. return ( ) 안에 html태그들이 평행하게 여러개 들어갈 수 없음
3. function App( ){ } 내부에서 만들면 안됨

왜냐면 function App( ){ } 도 컴포넌트 생성문법임 component안에 component를 만들진 않음

1. <컴포넌트></컴포넌트> or <컴포넌트 />

arrow function 써도 됩니다.

function Modal(){
  return ( <div></div> )
}

let Modal = () => {
  return ( <div></div> ) 
}

어떤 HTML들을 Component 만드는게 좋을까

• 사이트에 반복해서 출현하는 HTML 덩어리들
• 내용이 매우 자주 변경될 것 같은 HTML부분을 잘라서 Component로 만들면 좋음
• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용
• 다른 팀원과 협업할 때 웹페이지를 component 단위로 나눠서 작업을 분배하기도 함

컴포넌트는 그냥 함수 문법이랑 똑같아서 용도도 똑같음

Component의 단점

state 가져다쓸 때 문제생김

함수 안에 변수는 사용범위가 { } 중괄호 안이기 때문에

❗리액트 환경에서 동적인 UI 만드는 법(모달창만들기)

리액트에서 동적인 UI 만드는 step

동적인 UI : 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등

1. html css로 미리 UI 디자인을 다 해놓고
2. UI 의 현재 상태를 state로 저장해두고
3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성

step1. html css로 미리 디자인해놓기

step2. UI의 현재 상태를 state로 저장

let [modal, setModal] = useState(false);

step3. state에 따라서 UI가 어떻게 보일지 작성

{modal === true ? <Modal></Modal> : null}

JSX에서 조건문 쓰는 법

if문법 대신 삼항연산자!! JSX 중괄호 안에서 사용가능

글제목 누르면 모달창을 띄우고 싶어요

글제목 누르면 state를 조절해주세요~ 라고 코드짜면 됨

토글

<h4
  onClick={() => {
    setModal(!modal);}}
>