[React] JSX,state 실습

만분의 일·2022년 7월 10일

React

목록 보기

3/5

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

강의 듣다 나온 예시 문제들 내가 짠 코드와 답안 코드 비교

import logo from "./logo.svg";
import "./App.css";

function App() {
  let post = "강남 우동 맛집";

  return (
    <div className="App">
      <div className="black-nav">
        {/*style 넣을땐 style={{스타일명:'값'}} */}
        {/* object 자료형을 넣을 땐 중괄호 안에 또 중괄호를 넣어준다고 생각하면 된다. */}
        {/* object 자료형: String, System, ArrayList등등 */}
        <h4 style={{ color: "red", fontSize: "16px" }}>블로그임</h4>
      </div>
      {/* 변수안의 데이터를 넣고 싶을 떄 {중괄호 사용} */}
      {/* 이것을 데이터 바인딩이라고한다. */}
      <h4>{post}</h4>
    </div>
  );
}

export default App;

.black-nav {
  display: flex;
  background: #34b7eb;
  width: 100%;
  color: white;
  padding-left: 20px;
}

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

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";
  let [글제목, b] = useState("남자 코트 추천"); //변수를 저장하는 state문법. useState(보관할 자료) 얘가 state의  default데이터
                                              //setState: state의 변경을 도와주는 함수
																							// useState: state를 이렇게 써라~라고 이해해도 될거 같은데?
  let num = [1, 2]; //구조분해할당문법 (array안의 자료들을 변수로 빼주는 문법)
  let [a, c] = [1, 2];
  // let a = num[0];
  //let c = num[1];

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <div className="list">
        <h4>{a}</h4>
      </div>
    </div>
  );
}

export default App;

//컴포넌트를 직접 만드는 곳

state는 언제 사용?

변동시 자동으로 html에 반영되게 만들고 싶을 때

(자주 변경될거 같은 html부분은 state로 만들어놓기)

App.js
**//내가 한 방법**
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";
  let [title, setTitle] = useState("남자 코트 추천");
  let [title1, setTitle1] = useState("강남 우동 맛집");
  let [title2, setTitle2] = useState("파이썬 독학");
  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
        <h4>블로그임</h4>
      </div>
      <div className="list">
        <h4>{title}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title1}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title2}</h4>
        <h4>2월 17일 발행</h4>
      </div>
    </div>
  );
}

export default App;

/* eslint-disable */ //eslint-disable 끄는 방법
// best 답안
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";
  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, likes] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
        <h4>블로그임</h4>
      </div>
      <div className="list">
       <h4>
          {/* eventhandler onclick. onClick={} 안엔 함수 이름을 담아야 한다. */}
          {title[0]}
					// onclick안에서 직접
          <span
            onClick={() => {
              likes(1);
            }} 
          >
            👍
          </span>
          {like}
        </h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
    </div>
  );
}

export default App;

app.js
//버튼 누르면 따봉 +1

/* eslint-disable */ //eslint-disable 끄는 방법

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";
  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, likes] = useState(0); **//state 변경하는 법= state변경함수(새로운 state)**

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
        <h4>블로그임</h4>
      </div>
      <div className="list">
        <h4>
          {/* eventhandler onclick. onClick={} 안엔 함수 이름을 담아야 한다. */}
          {title[0]}
          <span
            onClick={() => {
              likes(like + 1);
            }}
          >
            👍
          </span>
          {like}
        </h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
    </div>
  );
}

export default App;

/* eslint-disable */ //eslint-disable 끄는 방법
**// 버튼을 만들어서 누르면 남자코트추천=>여자코트추천으로 변경
//내가 한 코드**
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";
  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [firstTitle, firstTitleChange] = useState("남자코트 추천"); //state 변경하는 법= state변경함수(새로운 state)

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
        <h4>블로그임</h4>
      </div>
      <div className="list">
        <h4>
          {/* eventhandler onclick. onClick={} 안엔 함수 이름을 담아야 한다. */}
          {firstTitle}
          <button
            onClick={() => {
              firstTitleChange("여자 코트 추천");
            }}
          >
            {" "}
            🚨누르지 마세요
          </button>
        </h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
    </div>
  );
}

export default App;

/* eslint-disable */
// 모범답안
/* eslint-disable */

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";

  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, likes] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
**//state가 array/object면 독립적인 copy본을 만들어서 수정해야한다.(shallow copy) 안그러면 안바뀜**
// copy의 0번째 요소를 "여자~"로 수정     
//state 변경하는 법= state변경함수(새로운 state) spread문법 사용해서 
 // 기존 state == 신규state의 경우 변경 안해준다.
				<button
        onClick={() => {
          let copy = [...title]; 
          copy[0] = "여자 코트 추천"; 
          setTitle(copy); 
        }}
      >
        정말정말 누르지마세요🚨
      </button>

      <div className="list">
        <h4>
          {/* eventhandler onclick. onClick={} 안엔 함수 이름을 담아야 한다. */}
          {title[0]}
          <span
            onClick={() => {
              likes(like + 1);
            }}
          >
            👍
          </span>
          {like}
        </h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
    </div>
  );
}

export default App;

/* eslint-disable */
//가나다 버튼을 누르면 제목이 가나다 순으로 정렬
**//내가 짠 코드
//남자를 여자 코트로 변경 후, 정렬 버튼을 눌러  강남우동 맛집이 첫 타이틀이 되었을때
// 여자 코트추천으로 변경해주는 버튼을 누르면 강남 우동 맛집이 여자 코트 추천으로 됌
// 결국 여자 코트 추천이 2개가 됨
//가나다 정렬을 위한 title함수를 또 만들어줘야하나? 근데 비효율적일거 같음**
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";

  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, likes] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <button
        onClick={() => {
          let ganada = [...title];
          let changeGanada = ganada.sort(); //sort를 이용해 정렬해주었다.
          setTitle(changeGanada);
        }}
      >
        가나다순 정렬💛
      </button>
      <button
        onClick={() => {
          let copy = [...title];
          copy[0] = "여자 코트 추천";
          setTitle(copy);
        }}
      >
        정말정말 누르지마세요🚨
      </button>

      <div className="list">
        <h4>
          {/* eventhandler onclick. onClick={} 안엔 함수 이름을 담아야 한다. */}
          {title[0]}
          <span
            onClick={() => {
              likes(like + 1);
            }}
          >
            👍
          </span>
          {like}
        </h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
    </div>
  );
}

export default App;

shallow copy란? (얕은 복사)

아래의 예시처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 데이터(주소)를 가지고 있다.

이것이 얕은 복사이다.

const obj1 = { a: 1, b: 2};
const obj2 = obj1;
console.log( obj1 === obj2 ); // true

/* eslint-disable */
//모범답안
// 위에 언급한 문제 부분이 모범답안에서도 똑같이 발생됌. 이 문제에 있어서는 상관 없는 부분인가봄
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";

  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, likes] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <button
        onClick={() => {
          let ganada = [...title];
          ganada.sort();  
          setTitle(ganada);
        }}
      >
        가나다순 정렬💛
      </button>
      <button
        onClick={() => {
          let copy = [...title];
          copy[0] = "여자 코트 추천";
          setTitle(copy);
        }}
      >
        정말정말 누르지마세요🚨
      </button>

      <div className="list">
        <h4>
          {/* eventhandler onclick. onClick={} 안엔 함수 이름을 담아야 한다. */}
          {title[0]}
          <span
            onClick={() => {
              likes(like + 1);
            }}
          >
            👍
          </span>
          {like}
        </h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
    </div>
  );
}

export default App;

만분의 일

1/10000이 1이 될 때 까지

이전 포스트

[React] 기본 파일 구조

다음 포스트

[React] JSX,state 실습

React

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

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

state는 언제 사용?

[React] 기본 파일 구조

[React] Modal창 실습

0개의 댓글