리액트 2주차

5-3  JSX

자바스크립트와 리액트를 혼용해서 사용할 수 있는..!

jsx는 component하는데 필요!

 

 화면에 컴포넌트를 구현하기 위해서는 App이라는 부모페이지에 child 페이지를 포함하고 있어야한다. 

<div className='App'>
	<MyHeader/>
    <header className="App-header">
    	<h2>안녕리액트{name}</h2>
    </header>
</div>

 

 

jsx의 간단한 문법들 

-닫힌규칙

<div>가 있으면 </div>처럼 닫힌 태그가 있어야만 한다

특힌 <image><a><br>처럼 html에서는 닫힌태그를 쓰지 않았던 것들은 주의해야한다

-최상위규칙

다른태그들을 감싸고 있는 가장 바깥쪽 태그가 최상위 태그(부모)이며 이게 없어지면 오류가 발생한다

만약 최상위태그를 사용하고 싶지 않으면 react.fragment를 사용하면 된다. import React from "react"는 필수

-jsx에서는 class 대신 classname

 

 

 

import React from "react";
import "./App.css";

function App() {
  let name = "장도진";

  return (
    <div className='App'>
      <MyHeader />
      <h2>안녕 리액트{name}</h2>
      <b> id='bold_text'> React.js</b>
    </div>
  );
}

export default App;

App.css

.App{
	background-color:black;
}
h2{
	color:red;
}

#bold_text{
	color:green;
}

 

인라인스타일링방식

import React from "react";
//import "./App.css";
import MyHeader from "./MyHeader";

function App() {
  let name = "장도진";

  const style = {
    App: {
      backgroundcolor: "black",
    },
    h2: {
      color: "red",
    },
    bold_text: {
      color: "green",
    },
  };
  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>안녕 리액트{name}</h2>
      <b style={style.bold_text} id="bold_text">
        React.js
      </b>
    </div>
  );
}

export default App;

5-4STATE

state(상태)란?

계속해서 변화하는 특정 상태, 상태에 따라 각각 다른 동작을 함

ex) 다크모드

App.js

import React from "react";
//import "./App.css";
import MyHeader from "./MyHeader";
import Counter from "./Counter";

function App() {
  const number = 5;

  return (
    <div>
      <MyHeader />
      <Counter/>
    </div>
  );
}

export default App;

Counter.js

import React, { useState } from "react";
const Counter = () => {
  //0에서 출발
  //1씩 증가하고
  //1씩 감소하는
  //count 상태
  const [count, setCount] = useState(0);
  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

5-5 props  : 컴포넌트에 데이터를 전달하는 방법

자식컴포넌트에 이름을 붙여서 전달하는 방식  PROPS!!

 

import React, { useState } from "react";
import OddEvenResult from "./OddEvenResult";

const Counter = ({ initialValue }) => {
  const [count, setCount] = useState(initialValue);

  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
      <OddEvenResult count={count} />
    </div>
  );
};

Counter.defaultProps = {
  initialValue: 0,
};

export default Counter;

의도 치 않게 props가 undefine으로 전달될거 같을 때는

Counter.defaultProps로 initialvalue를 0으로 설정해주면 된다.

const OddEvenResult = ({ count }) => {
  console.log(count);
  return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;
};

export default OddEvenResult;

const Container = ({ children }) => {
  console.log(children);
  return (
    <div style={{ margin: 20, padding: 20, border: "1px solid gray" }}>
      {children}
    </div>
  );
};

export default Container;

 

6-1일기장 만들기 

setAuthor 상태변화 함수

input value=author --> 값을 아무리 입력해도 상태가 변하지 않는다

const [author, setAuthor] = useState("장도진");

 

onChange={(e) => {

console.log(e.target.value);

console.log(e.target.name);

setAuthor(e.target.value);

값이 바뀌었을 때 수행하는 이벤트 

import { useState } from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
  });

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          name="author"
          value={state.author}
          onChange={(e) => {
            setAuthor({
              author: e.target.value,
              content: state.content,
            });
          }}
        />
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={(e) => {
            setState({
              content: e.target.value,
              author: state.content,
            });
          }}
        />
      </div>
    </div>
  );
};
export default DiaryEditor;