gukbi

React

🎯

• JSX에서 태그를 사용할때 꼭 닫아 주어야 한다.
• JSX에서 속성은 HTML과 비슷하게 작성되지만 class의 경우 className처럼 JavaScript의 관습에 따라 작성된다.
• 변수의 경우 중괄호{}를 통해 접근 할 수 있다.
• 여러 요소를 렌더링 할 경우 map함수를 사용 할 수 있다. (React 에서 반복되는 태그를 만들 경우에는 유니크한 값을 갖는 key 프로퍼티를 추가하는 것을 강력히 권장한다.) ```jsx /**
• map Example */ function NumberList(props){ const {numbers} = props; const listItems = numbers.map((number) => <li key="number-list-1-{number}"> {number} </li> ); return ( <ul>{listItems}</ul> ); } function App(){ return <NumberList numbers={[1,2,3,4,5]}>; } jsx /**
• Props Example 1 */ function GreetingProps(props){ return (

  Hello, {props.name}({props.age})

  ); } function App(){ return (

  ); } jsx /**

• Props Example 2 */ function Greeting(props){ if(props.isLoggedIn){ return <h1>Welcome back!</h1>; } dlse { return <h1>Please sign up.</h1>; } } function App(){ const userIsLoggedIn = true; return (
  <Greeting isLoggedIn={userIsLoggedIn}/>

  ); } ```

Export

Export Example

useState

useState Example

CSS

Inline Style

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

// 스타일 객체 정의
const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgrey'
};

// App 컴포넌트 정의
function App() {
  return (
    <div className="App">
      <div style={divStyle}>Styled element</div>
    </div>
  );
}

Global Style

/* styles.css */
.container {
  background-color: lightblue;
  padding: 20px;
}

// App.js
import React from 'react';
import './styles.css';
function App() {
  return <div className="container">Hello, World!</div>;
}

CSS Module

/* App.module.css */
.container {
  background-color: lightblue;
  padding: 20px;
}

// App.js
import React from 'react';
import styles from './App.module.css';

function App() {
  return <div className={styles.container}>Hello, World!</div>;
}

Child Component

Example 1

When want to use custom onclick event to ChildComponent

// You can write code like this
function ChildComponent(props) {
  const handleButtonClick = typeof props?.onClick == 'function' ? props?.onClick : () => {
    alert("Button clicked!");
   };
   // 삼항 연산자 사용(Using state?A:B) 

  return (
    <div>
	ChildComponent<br/>
      <button onClick={handleButtonClick}>클릭하세요</button>
    </div>
  );
}

function App(){
	return (
    <div>
     <ChildComponent />
     <ChildComponent onClick={() => {
         alert("Custom onClick!");
         }} />
    </div>
    );
}

This site is open source. Improve this page.