React 기본

import React, {Component} from 'react';

class ClassComponent extends Component {
	render() {
		return(
			<h1>Class Component 입니다.</h1>
		); 
	}
}

export default ClassComponent;

const FunctionComponent = () => {
	return <div>Funtional Component 입니다</div> 
};

export default FunctionComponent;

function App() {
	const str = 'Hello, JSX World!'
	return (
    <div className="App">
      {str}
		</div> 
	);
}

export default App;

function App() {
const str = 'Hello, JSX World!' 
	return (
    <div className="App">
      {str}
		</div> 
	);
}

export default App;

function App() { 
	return (
		<div className="App">
			<div style={{ fontSize: "32px" }}>인라인 스타일</div>
		</div>
	);
}

export default App;

function App() {
  const fontStyle = { fontSize: "32px" }
	
	return (
		<div className="App">
			<div style={fontStyle}>인라인 스타일</div>
		</div>
	);
}

export default App;

function App() {
  return (
		<div className="App">
			<div style={{ fontSize: "32px", backgroundColor: "orange" }}>인라인 스타일</div>
		</div> 
	);
}

export default App;

function EventHandler() {
  return (
    <span
      onClick={() => {
        console.log('클릭됨!');
      }}
    >
      클릭!
    </span>
  );
}

export default EventHandler;

function EventHandler() {
  function printConsole() {
    console.log('클릭됨!');
  }

  return <span onClick={printConsole}>클릭!</span>;
}

export default EventHandler;

import { useState } from 'react';

const [state, setState] = useState(초기값);

import { useState } from 'react';

export default function State() {
  const [name, setName] = useState('장경은');
  const convertLang = () => {
    name === '장경은' ? setName('JKE') : setName('장경은');
  };
  return (
    <div>
      <button onClick={convertLang}>한/영 변환!</button>
      <div>{name}</div>
    </div>
  );
}

import { useState } from 'react';

export default function StateAndVar() {
  const [state, setState] = useState(0);
  let a = 0;

  function plus() {
    a++;
    console.log(`state: ${state}, variable: ${a}`);
  }

  return (
    <div>
      <h1>
        {state} / {a}
      </h1>
      <button
        onClick={() => {
          setState((cur) => cur + 1);
          plus();
        }}
      >
        +1
      </button>
    </div>
  );
}

import { useState } from 'react';

export default function StateProblem() {
  const [state, setState] = useState([0]);
  console.log(state);
  return (
    <div>
      {state}
      <br />
      <button
        onClick={() => {
          state[0] = 1;
          setState(state);
          console.log(state);
        }}
      >
        1로 만들기
      </button>
    </div>
  );
}

import { useState } from 'react';

export default function StateProblem() {
  const [state, setState] = useState([0]);
  console.log(state);
  return (
    <div>
      {state}
      <br />
      <button
        onClick={() => {
          setState([1]);
          console.log(state);
        }}
      >
        1로 만들기
      </button>
    </div>
  );
}

import { useState } from 'react';

export default function StateProblem() {
  const [state, setState] = useState([0]);
  console.log(state);
  return (
    <div>
      {state}
      <br />
      <button
        onClick={() => {
          state[0] = 1;
          const copyArr = [...state];
          setState(copyArr);
          console.log(state);
        }}
      >
        1로 만들기
      </button>
    </div>
  );
}

function PropsHeader({ text }) {
  return <h1>{text}</h1>;
}

export default PropsHeader;

import PropsHeader from './components/PropsHeader';

function App() {
  return (
    <div className='App'>
      <PropsHeader text='안녕하세요' />
      <PropsHeader text='감사해요' />
      <PropsHeader text='잘있어요' />
      <PropsHeader text='다시만나요' />
    </div>
  );
}

export default App;