리액트(2)

function App() {

  let posts = '강남 고기 맛집';

  // useState를 이용해서 따봉 누를때 마다 0-> 숫자증가
  let [따봉, 따봉변경] = useState(0);
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학']);
  function 제목바꾸기() {
    var newArray = [...글제목]; //값 복사, 공유가 아닙니다
    newArray[0] = '여자코트 추천';
    글제목변경(newArray);
  }
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      <div className="list">
        <h3>{글제목[0]}<span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span>{따봉} </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>

App.js

import React from 'react';

function App() {
  const sayHello = () => {
    console.log('Hello')
  }
  return (
    <div>
      <h1>Hello React</h1>
      <button onClick={sayHello}>Hello</button>
    </div>
  );
}

export default App;

Hello React 글자를 출력합니다
버튼의 이름은 Hello 입니다.
button 을 클릭하면 sayHello 함수를 호출합니다 콘솔창에 Hello 가 출력됩니다

App.js

      import React from 'react';
import Tweet from './Tweet';

function App() {


  return (
    <div className="app">
      <Tweet name="Dev ED" />
      <Tweet name="John Snow" />
      <Tweet name="Traversy Media" />
      <Tweet name="Mosh" />
    </div>
  );
}

export default App;

Tweet.js 내용을 import 합니다. Tweet 을 import 하는데, name을 줬습니다

Tweet.js

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

function Tweet(props) {
    return (
        <div className="tweet">
            <h3>{props.name} </h3>
            <p>This is a random Tweet</p>
            <h3>Number of likes</h3>
        </div>
    );
}

export default Tweet;

App.js 에서 받은 name은 마치 자바의 파라미터 처럼 (여기선 property) 들어가서
중괄호를 적으면 출력할 수 있습니다.

자바스크립트 문법을 JSX 에서 사용하고 싶다면 {} 중괄호 사용하는걸 잊지 말아야 합니다.

name 말고

import React from 'react';
import Tweet from './Tweet';

function App() {


  return (
    <div className="app">
      <Tweet name="Dev ED" message="오늘 점심은 무엇인가요?" />
      <Tweet name="John Snow" message="오늘 저녁은 무엇인가요?" />
      <Tweet name="Traversy Media" message="오늘 아침은 무엇인가요?" />
      <Tweet name="Mosh" message="콘푸라이트 좋아해요?" />
    </div>
  );
}

export default App;

App.js 에 message를 적고

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

function Tweet(props) {
    return (
        <div className="tweet">
            <h3>{props.name} </h3>
            <p>{props.message}</p>
            <h3>Number of likes</h3>
        </div>
    );
}

export default Tweet;

p태그처럼 props.message 를 적으면 message도 가져 올 수 있어요