sujin's 개발 로그

[React] 8. Effects

sujin7837 — Sun, 18 Dec 2022 20:15:04 +0900

state가 변화할 때 모든 component가 다시 실행되고, code들도 다시 실행됩니다. 그러나 component 내의 몇몇 코드들은 처음 한 번만 실행되고 다시 실행되지 않도록 할 필요가 있습니다. 이럴 때 Effect를 사용해주면 됩니다.

아래 코드에서 "call an api"는 한 번만 실행하면 되는 로그입니다. 그러나 버튼을 클릭할 때마다 항상 실행됩니다.

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("call an api");

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

useEffect

useEffect를 사용하면 코드가 처음 실행될 때 한 번만 실행되고, state가 바뀌어도 다시 실행되지 않습니다.

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("i run all the time");	// state가 변화하면 항상 실행됨
  const iRunOnlyOnce = () => {
    console.log("i run only once");	// state가 변화해도 처음 한 번만 실행됨
  }
  useEffect(iRunOnlyOnce, []);
  useEffect(()=>{
    console.log("CALL THE API...");	// state가 변화해도 처음 한 번만 실행됨
  }, []);

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

useEffect(() => {코드}, [지켜볼 대상]);

지켜볼 대상이 없으면, 코드는 한 번만 실행됩니다.

지켜볼 대상이 있으면, 코드는 그 대상이 변화할 때마다 실행됩니다.

따라서 useEffect를 이용하면 컴포넌트 변화에 따른 코드 실행을 변화시킬 수 있습니다.

function Hello() {
  useEffect(() => {
    console.log("created :)");	// 컴포넌트가 생성될 때 실행됨
    return ()=>console.log("destroyed :(");	// 컴포넌트가 소멸될 때 실행됨
  }, []);
  return <h1>Hello</h1>;
}

위 코드를 통해 컴포넌트가 언제 생성되고, 언제 소멸되는지를 확인할 수도 있습니다.

function Hello() {
  function byFn() {
    console.log("bye : (");
  }
  function hiFn() {
    console.log("created :)");
    return byFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

React.js가 hiFn을 실행하고, component가 파괴될 때에 React.js는 hiFn이 return한 byFn을 실행합니다.

즉, useEffect를 사용하면 시작할 때만 code를 실행하게 할 수도 있고, 무언가가 변화할 때 code가 실행되게 할 수도 있고, component가 파괴될 때 code가 실행되게 할 수도 있습니다.

useEffect를 사용한 예시

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("hi: )");
    return ()=> console.log("by :(");
  }, []);
  useEffect(function() {
    console.log("hi: )");
    return function() {
      console.log("by :(");
    }
  }, []);
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

출처 : 노마드코더

[React] 7. Create-React-App

sujin7837 — Thu, 15 Dec 2022 22:35:19 +0900

Create-React-App

Create-React-App은 많은 스크립트와 사전설정을 통해 ReactJS를 사용하기 훨씬 쉽게 해줍니다. 개발 서버에 접근하거나, 자동으로 새로고침을 하거나, 어플리케이션에 CSS를 즉각적으로 포함시켜주는 등 다양한 기능을 제공합니다.

1) node.js 설치

2) 콘솔에 node -v 입력

노드 버전이 뜬다면 설치가 정상적으로 완료된 것입니다.

3) 콘솔에 npx 입력

정상적으로 작동된다면 준비가 완료된 것입니다.

4) npx create-react-app 생성할어플리케이션이름

'생성할어플리케이션이름'으로 어플리케이션 폴더가 생성된 것을 확인할 수 있습니다.

5) vscode에서 생성된 어플리케이션 폴더를 열어줌

6) 터미널에 npm start를 입력

development server(개발용 서버)를 만들게 되며 자동으로 브라우저가 열립니다.

7) src 폴더 안에 App.js와 index.js 파일만 남기고 나머지는 삭제

8) App.js

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
    </div>
  );
}

export default App;

9) index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Module을 이용하여 style 적용

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
    
  </React.StrictMode>,
  document.getElementById("root")
);

// App.js

import Button from './Button';
import styles from "./App.module.css";

function App() {
  return (
    <div>
      <h1 className={styles.title}>Welcome back!</h1>
      <Button text={"Continue"}/>
    </div>
  );
}

export default App;

// Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({text}) {
    return <button className={styles.btn}>{text}</button>;
    
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
}

export default Button;

// Button.module.css

.btn {
    color: white;
    background-color: tomato;
}

// App.module.css

.title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
}

module을 이용하여 css를 적용하게 되면, className에 해당 모듈의 클래스명이 랜덤으로 지정되어 각 요소마다 다른 style을 적용할 수 있게 됩니다.

[React] 6. Memo

sujin7837 — Sun, 4 Dec 2022 16:57:08 +0900

function Btn({text, changeValue}) {
	console.log(text, "was rendered");
    return (
      <button
        onClick = {changeValue}
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {text}
      </button>
    );
  }
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <Btn text={value} changeValue={changeValue} /> 
        <Btn text="Continue" />
      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

첫번째 버튼을 누르면 Save Changes에서 Revert Changes로 글자가 변경됩니다. 이때 위 코드에 의하면 버튼 두 개가 모두 새롭게 렌더링됩니다. 그런데 여기서 두번째 버튼은 변화가 없기 때문에 리렌더링되는 것이 비효율적입니다. 이러한 점을 개선하기 위해 Memo를 사용해줄 수 있습니다.

Memo

React에게 어떤 컴포넌트가 다시 그려지는 것을 원치 않는다고 말해주는 기능입니다. 이 기능을 사용하면 prop에 변화가 있을 경우만 리렌더링해주고, 변화가 없을 경우에는 리렌더링을 하지 않습니다.

function Btn({text, changeValue}) {
    console.log(text, "was rendered");
    return (
      <button
        onClick = {changeValue}
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {text}
      </button>
    );
  }
  const MemorizedBtn = React.memo(Btn);
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <MemorizedBtn text={value} changeValue={changeValue} />  
        <MemorizedBtn text="Continue" />
      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

출처 : https://nomadcoders.co/react-for-beginners/lectures/3276

[React] 5. Props

sujin7837 — Sun, 4 Dec 2022 16:43:00 +0900

Props

Props는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다.

Props의 특징

- 상위에서 하위로만 값을 전달하는 단방향 흐름을 가집니다.

- 하위에서 프로퍼티를 수정할 수 없다는 특징을 가집니다.

- props는 첫번째이자 유일한 인자입니다. ex) function Btn(props) {}

- 하위 컴포넌트에서 보낸 모든 것들을 갖는 오브젝트입니다.

Props를 사용한 예시

버튼을 만들 때, 동일한 style을 갖는 버튼 여러 개를 생성하고자 한다면 여러개의 버튼 컴포넌트를 생성하고 props를 통해 버튼 이름을 전달해줄 수 있습니다.

  function Btn(props) {
    console.log(props);
    return (
      <button
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {props.banana}
      </button>
    );
  }
  function App() {
    return (
      <div>
        <Btn banana="Save Changes" />  
        <Btn banana="Continue" />
      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

이때, props는 {}로 줄여서 사용 가능합니다.

  function Btn({banana}) {
    return (
      <button
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {banana}
      </button>
    );
  }
  function App() {
    return (
      <div>
        <Btn banana="Save Changes" />  
        <Btn banana="Continue" />
      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

props를 여러 개 사용할 수도 있습니다. 아래와 같이 text와 big을 사용하게 되면, 첫번째 버튼에는 big에 true가 할당되고, 두번째 버튼에는 big에 undefined가 할당됩니다.

function Btn({text, big}) {
    return (
      <button
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {text}
      </button>
    );
  }
  function App() {
    return (
      <div>
        <Btn text="Save Changes" big={true} />  
        <Btn text="Continue" />
      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

만약 상위 컴포넌트와 하위 컴포넌트가 같은 프로퍼티를 가지면, 상위 컴포넌트의 값이 세팅됩니다. 따라서 아래의 경우에는 폰트 크기가 변경됩니다.

function Btn({text, big}) {
    return (
      <button
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
          fontSize: big ? 18 : 16,
        }}
      >
        {text}
      </button>
    );
  }
  function App() {
    return (
      <div>
        <Btn text="Save Changes" big={true} />  
        <Btn text="Continue" />
      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

Btn 컴포넌트 안에 프로퍼티를 만들어준다고 해서 자동으로 return에 들어가지 않습니다. 따라서 Btn의 프로퍼티 값으로 적어주어야 합니다.

function Btn({text, changeValue}) {	// 2. Btn의 props를 등록
    return (
      <button
        onClick = {changeValue}	// 3. props 사용
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {text}
      </button>
    );
  }
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <Btn text={value} changeValue={changeValue} />  // 1. Btn의 prop으로 text와 changeValue 생성
        <Btn text="Continue" />
      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);

Prop Types

Prop Types는 어떤 Type의 Prop을 받고 있는지 체크해줍니다. 따라서 잘못된 Type을 전달해줄 때 이를 수정하는데 용이합니다.

Prop Types 사용

1. script src을 추가합니다.

<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

2. prop에 type을 설정해줍니다.

Btn.propTypes = {
    text : PropTypes.string,
    fontSize : PropTypes.number
  }

Btn이라는 컴포넌트의 prop인 text와 fontSize의 타입을 각각 문자열과 숫자로 설정합니다.

두번째 버튼의 타입이 설정된 타입에서 벗어나므로, 콘솔 창에 경고 문구가 뜨는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  function Btn({text, fontSize}) {
    console.log(text, "was rendered");
    return (
      <button
        style={{
          backgroundColor: "tomato",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10,
          fontSize,
        }}
      >
        {text}
      </button>
    );
  }
  Btn.propTypes = {
    text : PropTypes.string,
    fontSize : PropTypes.number
  }
  function App() {
    return (
      <div>
        <Btn text="Save Changes" fontSize={18} />  
        <Btn text={14} fontSize={"Continue"} />  

      </div>
    );
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

https://reactjs.org/docs/typechecking-with-proptypes.html

위 링크에서 propTypes에 대한 다양한 사용 예시를 확인해볼 수 있습니다.

출처 : 노마드코더

[React] 4. State

sujin7837 — Tue, 22 Nov 2022 23:27:44 +0900

State

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter = counter + 1;
      render();
    }

    function render() {
      ReactDOM.render(<Container />, root);
    }
    function Container() {
       return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={countUp}>Click me</button>
        </div>
      );
    }
    render();
  </script>
</html>

위 코드를 실행하고 브라우저의 개발자 도구 Elements에서 소스 코드를 확인해보면, h3, button, div들은 업데이트되지 않고 UI에서 바뀐 부분만 업데이트 해주는 것을 알 수 있습니다. 즉, React.js는 이전에 렌더링된 컴포넌트가 어떤건지 확인하고 다음에 렌더링될 컴포넌트가 무엇인지를 확인하여 다른 부분만 파악합니다. 따라서 모든 컴포넌트를 리렌더링할 필요 없이, 바뀐 부분만 다시 렌더링한다는 장점을 가지고 있습니다.

배열 쉽게 사용하기

const food = ["tomato", "potato"]

// 기존 코드
// tomato -> 'tomato'
// potato -> 'potato'
const tomato = food[0];
const potato = food[1];


// 간단한 코드
// myFavFood -> 'tomato'
// mySecondFavFood > 'potato'
const [myFavFood, mySecondFavFood] = food;

state 사용하기

React.useState() -> [변수, 함수]

ex) const [counter, setCounter] = React.useState(0);

counter는 변수, setCounter 함수로 사용이 가능합니다.

따라서 state의 함수를 이용하여 렌더링을 손쉽게 구현할 수 있게 됩니다. 함수 내에 코드를 작성하여 코드가 바뀔 때마다 컴포넌트를 리렌더링하고 UI를 refresh할 수 있게 해줍니다. 가장 중요한 것은 state가 바뀌면 리렌더링이 일어난다는 것입니다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;

    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

Inputs and State

js 문법

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function App() {
      return (
        <div>
          <h1 class="hi">Super Converter</h1> 
          <label for="minutes">Minutes</label> 
          <input id="minutes" placeholder="Minutes" type="number" />
          <label for="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number" />
        </div>
      )
    }
      const root = document.getElementById("root");
      ReactDOM.render(<App />, root);
  </script>
</html>

jsx 문법

1) script : production.min.js -> development.js

2) class -> className

3) for -> htmlFor

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function App() {
      return (
        <div>
          <h1 className="hi">Super Converter</h1> 
          <label htmlFor="minutes">Minutes</label> 
          <input id="minutes" placeholder="Minutes" type="number" />
          <label htmlFor="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number" />
        </div>
      )
    }
      const root = document.getElementById("root");
      ReactDOM.render(<App />, root);
  </script>
</html>

input에서 value와 함수 이용하기

{ } 안에 state의 value 혹은 함수를 넣어주면 state를 활용한 다양한 기능을 만들 수 있습니다.

아래 예시에서는 시간 <-> 분 단위 변환하는 기능을 구현하고 있습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  function App() {
    const [amount, setAmount] = React.useState(0);
    const [inverted, setInverted] = React.useState(false);
    const onChange = (event) => {
      setAmount(event.target.value);
    }
    const reset = () => setAmount(0);
    const onInvert = () => {
      reset();
      setInverted((current) => !current);
    }

    return (
      <div>
        <h1 className="hi">Super Converter</h1> 
        <div>
          <label htmlFor="minutes">Minutes</label> 
          <input 
            value={inverted ? amount*60 : amount}
            id="minutes" 
            placeholder="Minutes" 
            type="number" 
            onChange={onChange}
            disabled={inverted}
          />  
        </div>
        <div>
          <label htmlFor="hours">Hours</label>
          <input 
            value={inverted ? amount : Math.round(amount/60)}
            id="hours" 
            placeholder="Hours" 
            type="number" 
            onChange={onChange}
            disabled={!inverted}
          />
        </div>
        <button onClick={reset}>Reset</button>
        <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
      </div>
    )
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

Component and State

화면에 렌더링되는 과정은 App 컴포넌트를 통해 이뤄집니다. 따라서 브라우저에 화면을 띄우기 위해서는 App.js에 존재해야 합니다.

MinutesToHours 라는 컴포넌트를 만들고, App에 넣어주어 렌더링할 수 있습니다. 이것을 이용하여 select 박스를 만들고, 원하는 항목을 선택하였을 때 선택된 것만 렌더링되도록 하는 기능도 만들어줄 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  function MinutesToHours() {
      const [amount, setAmount] = React.useState(0);
      const [inverted, setInverted] = React.useState(false);
      const onChange = (event) => {
        setAmount(event.target.value);
      }
      const reset = () => setAmount(0);
      const onInvert = () => {
        reset();
        setInverted((current) => !current);
      }

      return (
        <div>
          <div>
            <label htmlFor="minutes">Minutes</label> 
            <input 
              value={inverted ? amount*60 : amount}
              id="minutes" 
              placeholder="Minutes" 
              type="number" 
              onChange={onChange}
              disabled={inverted}
            />  
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input 
              value={inverted ? amount : Math.round(amount/60)}
              id="hours" 
              placeholder="Hours" 
              type="number" 
              onChange={onChange}
              disabled={!inverted}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
        </div>
      )
    }
  function KmToMiles() {
    return <h3>KM 2 M</h3>
  }
  function App() {
    const [index, setIndex] = React.useState("xx");
    const onSelect = (event) => {
      setIndex(event.target.value);
    } 
    console.log("render w/", index);
    return (
      <div>
        <h1 className="hi">Super Converter</h1> 
        <select name="" id="" value={index} onChange={onSelect}>
            <option value="xx">Select your units</option>
            <option value="0">Minutes & Hours</option>
            <option value="1">Km & Miles</option>
        </select>
        <hr />
        {index === "xx" ? "Please select your units" : null}
        {index === "0" ? <MinutesToHours /> : null}
        {index === "1" ? <KmToMiles /> : null}
      </div>
    )
  }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

출처 : https://nomadcoders.co/react-for-beginners/lectures/3275

All Courses – 노마드 코더 Nomad Coders

초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!

nomadcoders.co

[React] 3. JSX

sujin7837 — Sun, 13 Nov 2022 23:35:58 +0900

JSX란?

JSX는 JavaScript를 확장한 문법으로, HTML에서 사용한 문법과 유사한 문법을 사용하여 React 요소를 만들 수 있게 합니다. 이를 통해 createElement를 대체하여 개발자들이 좀 더 편리하게 사용하도록 도와주기도 합니다.

// JSX

const Title = (
  <h3 id="title" onMouseEnter={() => consol.log("mouse enter")}>
    Hello I'm a title
  </h3>
);
    
const Button = (
  <button 
    id="button" 
    style={{backgroundColor: "tomato",}} 
    onClick={() => console.log("im clicked")}>
    Click me
  </button>
);

// 기존 코드
const Title = React.createElement(
  "h3", 
  {
    id: "title", 
    onMouseEnter: () => consol.log("mouse enter"),
  }, 
  "Hello I'm a span"
);
    
const Button = React.createElement(
  "button", 
  {
    onClick: () => console.log("im clicked"),
    style: "tomato"
  }, 
  "Click me");

Babel > Try it out 을 이용하면 JSX를 기존 코드로 변환할 수 있습니다.

Babel 추가하기

React가 JSX를 인식하도록 하려면 Babel을 추가해주어야 합니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">

1. src 추가

2. 스크립트 타입 추가

컴포넌트들을 포함하는 JSX 문법

1. 컴포넌트들을 함수로 만들어주어야 합니다.

1) arrow function

const Button = () => (
  <button 
    id="button" 
    style={{backgroundColor: "tomato",}} 
    onClick={() => console.log("im clicked")}>
    Click me
  </button>
);

2) 일반 function

function Title() {
  return (
    <h3 id="title" onMouseEnter={() => consol.log("mouse enter")}>
      Hello I'm a title
    </h3>
  );
}

2. 컴포넌트 렌더링 : 일반적인 HTML 태그인 것처럼 포함시켜줍니다.

// JSX
const Container = (
  <div>
    <Title />
    <Button />
  </div>
);


// 위 코드는 아래 코드와 같은 의미를 갖습니다.
const Container = (
  <div>
    <h3 id="title" onMouseEnter={() => consol.log("mouse enter")}>
      Hello I'm a title
    </h3>
    <button 
        id="button" 
        style={{backgroundColor: "tomato",}} 
        onClick={() => console.log("im clicked")}>
        Click me
      </button>
  </div>
);

// 기존 코드
const Container = React.createElement("div", null, [Title, Button]);

<Title />, <Button /> 태그를 이용하여 코드가 훨씬 간결해졌습니다. 이때, 컴포넌트의 첫 글자는 반드시 대문자여야 합니다.

2-1. ReactDOM에 렌더링 할 경우

const Container = () => (
  <div>
    <Title />
    <Button />
  </div>
);
ReactDOM.render(<Container />, root);

컴포넌트를 함수로 만들어주고, render 내부에 HTML 태그 형태로 컴포넌트를 추가해줍니다.

최종 코드

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    function Title() {
      return (
        <h3 id="title" onMouseEnter={() => consol.log("mouse enter")}>
          Hello I'm a title
        </h3>
      );
    }

    const Button = () => (
      <button 
        id="button" 
        style={{backgroundColor: "tomato",}} 
        onClick={() => console.log("im clicked")}>
        Click me
      </button>
    );

    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

[React] 2. Before React

sujin7837 — Sun, 13 Nov 2022 22:55:24 +0900

React와 React DOM import하기

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

React JS

Javascript를 이용하여 element를 생성하고, React JS가 그것을 HTML로 번역합니다.

즉, 바닐라 JS는 HTML -> JS 순서, 리액트는 JS -> HTML 순서 입니다.

ReactDOM

ReactDOM은 React element를 HTML로 바꾸는 역할을 합니다.

const h3 = React.createElement("h3", {onMouseEnter: () => consol.log("mouse enter")}, "Hello I'm a span");

(element, property, content) -> 괄호 안의 내용은 다음과 같은 의미를 갖습니다.

[React] 1. React 설치 및 환경세팅

sujin7837 — Tue, 8 Nov 2022 23:39:21 +0900

React 설치

1. Nodejs를 검색하여 LTS 버전을 설치합니다. 이때 설치 경로는 그대로 사용하는게 좋습니다.

2. Visual Studio Code를 검색하여 설치합니다.

3. 작업용 폴더를 하나 만들어줍니다.

4. 터미널에서 3번 폴더 경로로 이동하여 아래 코드를 입력합니다.

npx create-react-app 프로젝트명

// permission이 없다는 에러가 뜰 경우, 아래 코드로 입력
sudo npx create-react-app 프로젝트명

그래도 오류가 날 경우, 맨 아래 실행 오류 해결법을 참고하세요.

Editor에서 프로젝트 오픈

1. Visual Studio Code 에디터를 오픈합니다.

2. File - Open Folder - 오픈할폴더명

3. App.js : 메인페이지

브라우저 미리보기

1. 에디터 상단 메뉴 중 Terminal - New Terminal 클릭

2. npm start 입력

npx create-react-app 실행 오류

You are running `create-react-app` 4.0.2, which is behind the latest release (4.0.3).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

해결법 1) 메시지대로 삭제하고 다시 설치

npm uninstall -g create-react-app
yarn global remove create-react-app

해결법 2) 아래 실행 명령 순서대로 진행

1. npm uninstall -g create-react-app
2. npm add create-react-app
3. 다시 npx create-react-app myapp

위 사진처럼 출력되면 정상적으로 실행된 것입니다.

참고 : https://velog.io/@milkyway/React-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-You-are-running-create-react-app-4.0.2-which-is-behind-the-latest-release-4.0.3,

https://codingapple.com/unit/react1-install-create-react-app-npx/

[Kotlin] 흐름제어와 논리연산자

sujin7837 — Mon, 8 Aug 2022 12:53:56 +0900

흐름제어

return

'함수를 종료'하고 값을 '반환'하는 역할을 합니다.

break

반복문 내의 구문이 실행되는 중간에 즉시 반복문을 '종료'하고 다음 구문으로 넘어가는 역할을 합니다.

continue

다음 반복 조건으로 즉시 넘어가는 역할을 합니다.

fun main() {
    for(i in 1..10) {
        if(i==3) continue
        println(i)
    }
}

코틀린은 다중 반복문에서 break나 continue가 적용되는 반복문을 label을 통해 지정할 수 있습니다.

fun main() {
    loop@for(i in 1..10) {
        for(j in 1..10) {
            if(i==1 && j==2) break@loop
            println("i : $i, j : $j")
        }
    }
}

논리연산자

논리연산자(logical operators)는 논리 값을 연산하여 새로운 논리값을 도출할 때 쓰는 연산자입니다.

&&(and 연산자)

true && true => 둘 다 true일 때 true

||(or 연산자)

true || false => 둘 중 하나라도 true일 때 true

!(not 연산자)

뒤에 붙는 값을 반전시킴

[Kotlin] 반복문

sujin7837 — Sat, 6 Aug 2022 14:23:06 +0900

반복문

조건형 반복문

조건이 참인 경우 반복을 유지하는 반복문입니다.

while

fun main() {
	var a = 0
    
    while(a<5) {
        println(a++)
    }
}

do while

조건에 관계없이 최초 한번은 조건문 무조건 실행

fun main() {
	var a = 0
    
    do {
        println(a++)
    } while(a<5)
}

범위형 반복문

반복 범위를 정해 반복을 수행하는 반복문입니다.

for

fun main() {
	for(i in 0..9 step 3) {
        print(i)
    }
    
    println()
    
    for(i in 9 downTo 0) {
        print(i)
    }
    
    println()
    
    for(i in 'a'..'e') {
        print(i)
    }
}

// 결과
0369
9876543210
abcde

출처 : 테크과학! DiMo