비전공자 개발일기

React 본문

React & React Native

React

HiroDaegu 2021. 12. 19. 00:51
728x90
SMALL
import logo from './logo.svg';
import './App.css';

function App() {
  let posts = "강남 고기 맛집";
  function fnc() {
    return 100
  }
  return (
    <div className="App">
      <div className="black-nav">
        <div className={posts} style={{color: "#0000ff", fontSize: "30px"}}>개발 Blog</div>
      </div>
      <img src={logo} />
      <h4>{posts+fnc()}</h4>
    </div>
  );
}

export default App;

1. class 명 작성 -> className

2. 데이터 바인딩(Javascript data를 html에 넣는것) 하는 법

                          -> {변수명, 함수, 스타일 속성 값, 이미지 경로 등}

3. JSX에서 style 속성 사용 -> style = {object 자료형으로 만든 스타일}

                  ex) <div className={posts} style={{color: "#0000ff", fontSize: "30px"}}>개발 Blog</div>

                       1) 속성명 -> camelCase로 작성

                       2) 속성값 -> 문자열로 값 부여 (' ' or " " or ` ` )

4. state

import React, {useState} from 'react';
...
// Javascript ES6 Destructuring 
// let [a, b] = [10, 100]
// => let a = 10 / let b = 100

let [글제목, 글제목변경] = useState('남자 코트 추천');
// useState(저장할 데이터(문자열, 배열, 객체 등)) => [데이터1, 데이터2]
// 데이터1 = 실제 저장할 데이터
// 데이터2 = 변수에 저장할 데이터를 변경시킬 함수

※ 변수말고 state에 데이터 저장해서 사용하는 이유

-> 변수가 변경될 때 자동으로 관련된 HTML을 재렌더링되게 만들기 위함

-> 자주 변하는 데이터들을 저장하는 것이 좋은 관습

5. 변수 미사용과 같은 에러 미표시 방법 -> /* eslint-disable */

6. JSX 이벤트 -> <div onClick={실행할 함수}>

function App(){
  
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
    <HTML 많은 곳>
      <h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h3>
    </HTML 많은 곳>
  )
}

7. state(UI의 현재 상태를 보관하는 저장소역할) 변경

state = ~ 와 같은 직접 조작은 불가능

state 변경함수 사용

  • 수정하고 싶은 state의 deep/shallow 카피본을 하나 생성
  • 복사본 수정
  • 복사본을 state 변경함수()에 넣기
function 제목바꾸기() {
 //var newArray = 글제목; 
 // error -> 자바스크립트 내에서 array나 object 자료형은 = 등호로 복사하면 
 각각 별개의 자료형이 생성되는게 아니라 값을 공유(Javascript reference data type)
  let new Array = [... 글제목];
  newArray[0] = '여자코트 추천';
  글제목변경( newArray );
}
// 글 제목이라는 state를 직접 수정하는 것을 불가능
// 복사본 생성
// 복사본 newArray에 저장
// newArray의 0번째 데이터 변경
// 글제목변경 함수에 newArray 할당
/* eslint-disable */
import { useState } from "react";
import "./App.css";

function App() {
  let [글제목, 글제목변경함수] = useState(["남자 코트 추천", "강남 우동 맛집", "리액트 독학" ]);
  let [따봉, 따봉변경] = useState(0);
  
  function 제목바꾸기() {
    let newArray = [...글제목];
    newArray = newArray.sort();
    글제목변경함수(newArray);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>Button</button>
      <div className="list">
        <h3>{글제목[0]}<span onClick={() => {따봉변경(따봉+1)}}>👍</span> {따봉} </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{글제목[1]}</h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{글제목[2]}</h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
    </div>
  );
}

export default App;

spread 연산자(ES6): 「...」 -> 배열 / 객체 자료형 왼쪽에 붙여서 사용 -> 대괄호 / 중괄호 제거 

let data1 = [1,2,3];
let data2 = data1;

// 같은 값을 공유 (업데이트도 같이 일어남)

let data1 = [1,2,3];
let data2 = [...data1];

// 독립적인 array 복사본 생성(deep copy)

8. component : 긴 HTML을 한 단어로 치환해서 넣을 수 있는 문법

사용방법

  • 함수 생성
  • return( ) -> 괄호 안에 원하는 HTML 넣기
  • 원하는 곳에서 <함수명 />(<함수명></함수명>) 넣기

특징

  • Component 이름 -> 영어대문자로 시작하기
  • return 안에 태그들이 평행하게 여러 개 있는 건 불가능
  • 여러 평행한 태그들을 <div> 또는 <>(fragments)로 묶어서 사용

사용 (함수 문법 사용 경우와 유사)

  • 반복해서 출현하는 HTML 덩어리
  • 내용이 자주 변경될 것 같은 HTML 부분

단점

  • props 이용
function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
// 사용 불가
...
return (
  <div></div>
  <div></div>
)

// 사용 가능 1
...
return (
<div>
	<div></div>
    <div></div>
</div>
)

// 사용 가능 2
...
return (
<>
	<div></div>
    <div></div>
<>
)
function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
      <다른컴포넌트></다른컴포넌트>
    </div>
  )
}
function 다른컴포넌트(){
  return ( <div> 안녕 </div> )
}

9. 조건에 따른 실행 -> { } 안에 삼항연산자

React에서 클릭 시, 보이는 UI 만드는 법

  • UI가 보이는 / 보이지 않는 상태 정보를 state로 만들기(true/ false)
  • state가 true일 때만 UI를 보여주는 if문 사용
  • 기능 개발
function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      
      { 
         1 < 3 
         ? <Modal />
         : null
      }
    </div>
  )
}
// 버튼 클릭시 열고 닫히는 modal 생성
function App (){

  let [modal, modal변경] = useState(false);
  return (
    <div>

      <button onClick={ ()=>{ modal변경(!modal) } }> 열고닫는버튼 </button>
      { 
         modal === true 
         ? <Modal />
         : null
      }
    </div>
  )
}

10. 반복문 -> {배열.map()}

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      { 글제목.map(function(a){
        return (
        <div className="list">
          <h3>{ a }</h3>
          <p>2월 18일 발행</p>
          <hr />
        </div>
      }) }
    </div>
  )
}
function App (){

  function 반복된UI(){
    var 어레이 = [];
    for (var i = 0; i < 3; i++) {
      어레이.push(<div>안녕</div>)
    }
    return 어레이
  }
  return (
    <div>
      HTML 잔뜩있는 곳
      
      { 반복된UI() }
    </div>
  )
}

11. props -> 컴포넌트간 자료 전달법

사용법

  • <자식컴포넌트 전송할이름 = {state명} />
  • 자식 컴포넌트를 선언하는 function 안에 parameter로 props를 추가
  • props 전달 가능 갯수는 무한
  • props라는 parameter안에는 전송한 모든 props data가 있음 -> 원하는 것만 골라서 사용하면 됨
  • 전송할이름 = {state명} 또는 전송할 이름 = "텍스트" 둘 다 가능
function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [누른제목, 누른제목변경] = useState(0);
  return (
    <div>
      ...
      { 글제목.map(function(a, i){
        return (
        <div className="list">
          <h3 onClick={ ()=>{ 누른제목변경(i) } }>{ a } <span>👍</span> </h3>
          <p>2월 18일 발행</p>
          <hr />
        </div>
      }) }
      <Modal 글제목={글제목} 누른제목={누른제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h2>제목 { props.글제목[props.누른제목] }</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

12. 사용자가 input에 입력한 데이터를 state로 저장

function App (){

  let [입력값, 입력값변경] = useState('');

  return (
    <div>
      HTML 잔뜩있는 곳...
      <input onChange={ (e)=>{ 입력값변경(e.target.value) } />
    </div>
  )
}

13. map을 쓰면 콘솔창에 에러가 뜨는 이유 -> key = { }가 없기 때문

function App (){
  return (
    <div>
      ...
      { 글제목.map(function(a, i){
        return (
        <div className="list" key={i}>
          <h3 onClick={ ()=>{ 누른제목변경(i) } }>{ a } <span>👍</span> </h3>
          <p>2월 18일 발행</p>
          <hr />
        </div>
      }) }
    </div>
  )
}

14. 글발행 기능 추가

원리: 입력된 값을 변수(서버, 데이터베이스)에 저장 후 이벤트 발생시 화면에 출력!

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      HTML 잔뜩 있는 곳
      <div className="publish">
        <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
        <button onClick={ ()=>{ 

          let arrayCopy = [...글제목];
          arrayCopy.unshift(입력값);
          글제목변경( arrayCopy )

         }}>저장</button>
      </div>
    </div>
  )
}

15. class를 이용한 react 문법

  • class: 데이터 / 함수를 보관하는 덩어리
  • extends: 덩어리를 만들 때 오른쪽의 성질을 물려 받겠다는 의미
  • extends []: [ ] =컴포넌트 성질을 갖고 있는 덩어리 
  • constructor(): 변수와 함수가 가득한 class 덩어리를 만들 때 새로운 것들을 넣는 공간
  • super(): extends 했던 덩어리에 있던 변수들을 그대로 물려받겠다는 의미
class Profile extends React.Component {
  constructor(){
    super();
    this.state = { name : 'Kim', age : 30 }
  }

  render(){
    return (
      <div>
        <h3> 저는 { this.state.name } 입니다 </h3>
      </div>
    )
  }
}

------------------------------------------------------------------------
이름 변경
class Profile extends React.Component {
  constructor(){
    super();
    this.state = { name : 'Kim', age : 30 }
  }

  render(){
    return (
      <div>
        <h3> 저는 { this.state.name } 입니다 </h3>
        <button onClick={ ()=>{ this.setState( {name : 'Park'} ) } }> 버튼 </button>
      </div>
    )
  }
}
------------------------------------------------------------------------
커스텀 함수로 이름 변경
// 1
class Profile extends React.Component {
  constructor(){
    super();
    this.state = { name : 'Kim', age : 30 }
  }

  changeName = () => {
    this.setState( {name : 'Park'} )
  }

  render(){
    return (
      <div>
        <h3> 저는 { this.state.name } 입니다 </h3>
        <button onClick={ this.changeName }> 버튼 </button>
      </div>
    )
  }
}

// 2
class Profile extends React.Component {
  constructor(){
    super();
    this.state = { name : 'Kim', age : 30 }
  }

  changeName() {
    this.setState( {name : 'Park'} )
  }

  render(){
    return (
      <div>
        <h3> 저는 { this.state.name } 입니다 </h3>
        <button onClick={ this.changeName.bind(this) }> 버튼 </button>
      </div>
    )
  }
}

※ Arrow function(내부의 this 키워드 값을 변화시키지 않고 싶을 때 사용) vs function() {} 

-> Arrow function의 경우 안에 있는 this값을 재정의해주지 않기 때문에, 바깥에 있던 this의 값을 그대로 끌고와서 사용하지만, function() {} 의 경우 this값이 새롭게 변화함

16. react-Bootstrap -> 버전에 주의하면서 사용

※ React Bootstrap에서 코드 복사 붙여넣기 할때, Component명 import

https://react-bootstrap-v4.netlify.app/

 

React-Bootstrap

The most popular front-end framework, rebuilt for React.

react-bootstrap.github.io

메인화면 Get started -> Installation(버전 확인) -> (동일한 페이지 내) CDN 링크를 public 내 index.html에 추가 후 사용

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

17. import / export 

// export
(data.js 파일)

var 중요데이터 = 'Kim';
export default 중요데이터;
// 변수명, 함수명, 자료형 전부 배출 가능

(data.js 파일)

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }
// 2개 이상 배출 시 사용

// import
(App.js 파일)

import 중요데이터 from './data.js';

(App.js 파일)

import { name1, name2 } from './data.js';
// 2개 이상 배출한 것을 사용할 때에는 배출한 것 그대로 사용

18. 같은 컴포넌트라도 다른 값을 전송받을 수 있음

function App(){

  let [shoes, shoes변경] = useState(Data);
  return (
    <div className="App">
      <Navbar></Navbar> (그 사이트에 있던 navbar 예제 어쩌구)
      <Jumbotron></Jumbotron> (그 사이트에 있던 jumbotron 예제 어쩌구)

      <div className="container">
        <div className="row">
          <Card shoes={shoes[0]} />
          <Card shoes={shoes[1]} />
          <Card shoes={shoes[2]} />
        </div>
      </div>
    </div>
  )
}

function Card(props){
  return (
    <div className="col-md-4">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.content } & { props.shoes.price }</p>
    </div>
  )
}

19. react-router

yarn add react-router-dom
npm install react-router-dom
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>(<HashRouther>)
      <App/>
    </BrowserRouter>(</HashRouter>
  </React.StrictMode>
  document.getElementById('root')
);

-> HashRouter = 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작 

-> BrowserRouter = 기본

 (App.js)

import 많은 곳;
import { Link, Route, Switch } from 'react-router-dom';

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route path="/"> 
        <div>메인페이지인데요</div>
      </Route>
      <Route path="/detail">
        <div>상세페이지인데요</div>
      </Route>
    </div>
  )
}

<Route path="/어쩌구" component={Card} ></Route> 
(<Route path="/어쩌구"> <Card/> </Route>) 
-> 위의 두 줄로도 표현 가능

<Route exact path="/"> 
  <div>메인페이지에요</div> 
</Route>

20. React - Link, Switch

(App.js 파일)

function App(){
  return (
    <div>
      <Navbar>
         <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
         <Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
      </Navbar> 
      <나머지HTML/>
    </div>
  )
}

 

useHistory(hook)

(Detail.js 파일)

import React from 'react';
import { useHistory } from 'react-router-dom';

function Detail(){
  
  let history = useHistory();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button> 
          <button className="btn btn-danger">뒤로가기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail

 

Switch: Route들을 전부 보여주지 말고 한번에 하나만 보는 것

(App.js 파일)

function App(){
  return (
    <div>
      <나머지HTML/>
      <Switch>
        <Route exact path="/">
          어쩌구
        </Route>
        <Route path="/detail">
          <Detail/>
        </Route>
        <Route path="/:id">
          <div>새로 만든 route입니다</div>
        </Route>
      </Switch>
    </div>
  )
}

21. useParams 

(Detail.js 파일)

import React from 'react';
import { useHistory, useParams } from 'react-router-dom';

function Detail(props){

  let { id } = useParams();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
  </div>  
  )
};

export default Detail

22. styled-component

yarn add styled-components
npm install styled-components


import styled from 'styled-components'
import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.색상 };
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목 색상="blue">안녕하세요1</제목>
        <제목 색상={'red'}>안녕하세요2</제목>
      </박스>
    </div>
  )
}

23. SASS(SCSS): css를 변수, 반복문, 함수 등 사용 가능하게

$변수명 : 집어넣을 값;

yarn add node-sass
npm install node-sass

(Detail.scss 파일)

.red {
  color : red;
}

(Detail.scss)

$메인칼라 : #ff0000;

.red {
  color : $메인칼라;
}

@import './경로'

 @import './어쩌구.css';
 
 body {
  margin : 0;
} 
div {
  box-sizing : border-box;
}

nesting

보통의 css
div.container h4 {
  color : blue;
}
div.container p {
  color : green;
}

SASS(SCSS)
div.container {
  h4 {
    color : blue;
  }
  p {
    color : green;
  }
}

extends

(Detail.scss 파일)

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert2 {
  @extend .my-alert;
  background : yellow;
}

.my-alert p {
  margin-bottom : 0;
}

@mixin / @include : 함수 사용을 위한 문법

사용시, 함수를 먼저 작성한 후 밑에서 사용해야함(순차적)

(Detail.scss 파일)

@mixin 함수() {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert {
  @include 함수()
}

.my-alert p {
  margin-bottom : 0;
}

24. <Nav.Link> 안에 <Link> 사용 시 발생하는 warning 해결

<Nav.Link><Link to="/"> Home </Link></Nav.Link> 이 부분을
<Nav.Link as={Link} to="/"> Home </Nav.Link>  로 수정

25. Component의 Lifecycle Hook

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 Mount 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
  }
}
import React, {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //코드를 적습니다 여기
  });
  
  return (
    <HTML많은곳/>
  )
}
(Detail.js 파일)

function Detail(){

  let [ alert, alert변경 ] = useState(true);
  useEffect(()=>{
    let 타이머 = setTimeout(()=>{ alert변경(false) }, 2000);
    return () => {clearTimeout(타이머)};
  }, [ alert ]); // alert라는 이름의 state가 변경이 될 때만 업데이트하고 실행 만약 []만 있다면, 컴포넌트가 업데이트 될때 절대 실행되지 않음(컴포넌트 로드시, 딱 한번만 실행하기 위한 방법)
  
  return (
    <HTML많은곳/>
    {
      alert === true
      ? (<div className="my-alert2">
          <p>재고가 얼마 남지 않았습니다</p>
        </div>)
      : null
    }
  )
}

setTimeout 함수를 사용한다면 반드시 clearTimeout도 같이 사용할 것

26. Ajax = 서버에 새로고침없이 요청을 할 수 있게 도와주는 자바스크립트 코드

서버: 누군가 요청을 하면 데이터를 가져다주는 프로그램

요청: get(데이터, 웹 페이지 같은걸 읽고 싶을 떄 서버에 보내는 요청), post(데이터를 서버로 보내고 싶을 때 서버에 보내는 요청), ...

 

사용 방법

1. JQuery Ajax

2. Axios 

3. fetch()

 

yarn add axios
npm install axios
----------------------------------------------------------
import 많은곳;
import axios from 'axios';

function App(){
  
  return (
    <HTML많은곳/>
    <button className="btn btn-primary" onClick={()=>{

      axios.get('GET요청할URL');
      .then(()=>{ 요청성공시실행할코드 })
      .catch(()=>{ 요청실패시실행할코드 })

    }}>더보기</button>
  )
}

27. [...a, ...b]

 - a의 기존 state의 데이터를 괄호 벗겨서 여기에 넣고,

 - b라는 ajax 성공시 받아오는 데이터도 괄호 벗겨서 여기에 넣기

 - 이 둘을 모두 [ ]로 감싸서 array(object)로 만들기

 

 

 

728x90
LIST

'React & React Native' 카테고리의 다른 글

React Native - Hello World 출력 및 환경 설정  (0) 2022.01.09
React vs React Native  (0) 2021.12.28
mini blog with React  (0) 2021.12.26
React - Basic  (0) 2021.09.20
React  (0) 2021.08.15
'React & React Native' Related Articles more