#include <iostream>
using namespace std;

int A, B, C, N;
int mult;
int arr [10] = {0};

int main() {

    cin >> A >> B >>  C;
    mult = A*B*C; //1702

   while(mult>0){
        N = mult%10; // 2
        arr[N] ++; //2를 나타내는 부ㄴ +1 
        mult = mult/10; //170
    }

    for (int i = 0 ; i<10 ; i++){
        cout << arr[i] << '\n';
    }

    return 0;
}

BOJ 1475 방 번호

• 6을 9로 같이 카운팅한다는 접근 좋았으나, 반으로 나눌 때 소숫점 고려하지 않아서 틀림.
• if문에서 m==9일 때 m==6 하면 그건 연산이기 때문에 m=6으로 초기화 해야 함.
• 최댓값 계산법: max를 써서 그 배열에서 가장 큰 값을 m에 저장.
• 이 때 6과 9는 나와도 취급하지 않음. 그냥 넘어가고 6, 9의 합/2를 올림한 결과와 다른 단일 숫자들의 최댓값을 비교.

  for(int i = 0; i < 10; i++){
    if(i == 6 || i == 9) continue;
    ans = max(ans, a[i]);
  }
  // (a[6]+a[9])/2를 올림한 값이 6, 9에 대한 필요한 세트의 수이므로 (a[6]+a[9]+1)/2을 계산

#include <iostream>
using namespace std;

int n, m, max;
int arr [9] = {0}; //0~8

int main () {
    int max = 0;
    cin >> n;
    while (n>0){
        m = n%10;
        if(m==9){m=6;}
        arr[m]++;//9를 6에 같이 카운팅
        n = n/10;
    }

    if (arr[6]%2==0){
      arr[6] = arr[6]/2;
    }else arr[6] = arr[6]/2+1;

    max= 0;
    for (int i = 0 ; i<10 ; i++){
        if(arr[i]>max){
            max = arr[i]; //제일 큰 것 갱신
        }
    }//제일 많이 필요한 숫자 찾아내기 
    //만약 제일 많이 필요한 숫자가 6이나 9라면 그것의 절반만 필요함. 근데 6이 4개 필요한데 3이 3개 필요하다면?

    cout << max;

}

//전체 세트 갯수 = 같은 숫자의 최대 중복 수 , 그러나 중복되는 게 6이나 9일 경우 둘은 상쇄 가능하다. 한 세트에 6/9가 2개씩 들어있다.
// 1111 > 4개
// 1234 > 1개
// 1552 > 2개
// 1996 > 2개
//1995 > 1개
// 9999 > 2개

void main() {
  runApp(App());
}

위 함수는 나의 플러터 앱의 시작을 담당하는 메인 함수이다. 이 함수는 App이라는 위젯을 실행시킬 것이고, App 위젯을 이 앱의 root로 삼고 있다.

Widget

위젯은 레고 블럭과 같은 것이다. React로 따지면 컴포넌트 같은 것일까... 플러터에서는 이 위젯들을 합쳐서 앱을 빌딩하는 것이다.

세상에 정말 위젯들이 많고 개발자들이 만들어 둔 커뮤니티 위젯도 많다. 그러나 이걸 다 기억할 필요는 없고 필요할 때 찾아 쓰면 된다.

프로그래밍 언어의 입장에서 위젯은 class를 만드는 것과 같다. 위젯 메소드는 프로그램 UI에 보여줄 수 있도록 build 함수를 가져야 한다. build는 flutter가 실행하는 함수이다.

class App extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return 
  }

}

이것은 App 위젯의 코드이다. 이렇게 만들어진 위젯은 material 혹은 cuptertino라는 두 가지 선택지 중 하나를 리턴해야 하는데, material은 구글의 디자인 시스템, cupertino는 애플의 디자인 시스템이다.

플러터 자체가 구글이 만들었기 때문에 material 을 골라서 리턴해보겠다.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      Text("Hello World"),
      ),
    );
  }
}

home은 material app의 위젯의 한 종류이다. 이렇게 하면 개끔찍 UI가 생성된다.

flutter의 다른 중요한 요소가 하나 있는데 바로 scaffold이다.scaffold는 내비게이션 구성을 도와주고, 버튼, 중앙 정렬 등 앱의 구조를 잡는 걸 도와준다.

따라서 home 안에 또 다른 위젯인 scaffold가 필요하다.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text("Hello World"),
      ),
    );
  }
}

코드를 이렇게 바꾸면 좀 볼만해진다. Scaffold를 써서 이 앱을 구조화 시킨 것이다.

여기에 appBar, Center 등의 위젯, 즉 클래스를 더해주면 리액트마냥 앱을 쌓아올릴 수 있다.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

플러터는 죄다 widget으로 이루어져있고, 이것은 일종의 dart class이다. 위젯을 Scaffold로 구조화 시킬 수 있고, 이 구조에 widget을 넣고 쌓으면서 앱을 구성하게 된다.

React Router

리액트 안에서 길을 찾아서 페이지들을 보기 위해서는 react router dom이라는 라이브러리가 필요하다. 그래서 react router dom을 사용할건데, 이렇게 써서 사용할 것이다.

import {BrowserRouter as Router, Routes, Route}from 'react-router-dom'

'as'키워드로 3가지 컴포넌트를 임포트했다.

Routes는 웹사이트의 특정 부분만을 바꾸는 데 사용할 수도 있다. Route는 웹사이트에서 가지고자 하는 페이지를 정의하는 데 사용되는 등 다들 서로 다른 역할을 한다.

import "./App.css";
import Axios from "axios";
import {BrowserRouter as Router, Routes, Route}from 'react-router-dom'
import { useState, useEffect } from "react";

function App () {

    return (
        <div className = "App">
            <Router>
                <Routes>
                    <Route/>
                </Routes>
            </Router>

        </div>
    )
}

export default App;

이렇게 기본 모양새를 갖춘 형태가 완성되었다.

<div className = "App">
            <Router>
                <Routes>
                    <Route path="/"/>
                </Routes>
            </Router>

        </div>

이렇게 하면 이 페이지가 (App) 가장 기본이 되는 메인 페이지라는 것을 표시한 것이다.

<div className = "App">
      <Router>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                </Routes>
      </Router>

</div>

그리고 이렇게 설정하면 경로가 / 일 때 Home element를 보여주도록 설정하는 것이 된다. (단, 이 때 Home element를 따로 만들고 App 페이지에 import까지 해야 한다.)

만약 다른 링크에서 다른 element를 보여주고 싶다면 같은 방식으로 만들어려주면 된다. element를 작성하고, 주소를 설정하고 해당 주소에서 해당 element를 보여주도록 설정하면 된다.

만약 내가 설정하지 않은 주소들을 입력하면 어떻게 될까? 아무것도 안 보인다. 이 상황에 대한 핸들링을 위해 할 수 있는 방법이 있다.

<Route path="*" element={<h1>404</h1>}/>

이렇게 path를 * 로 설정해주면 설정한 주소 외의 경로를 컨트롤할 수 있다.

라우트 사이를 오가기 (직접 입력 제외)

그러면 내가 직접 링크를 쳐서 들어가는 것 말고, 어떻게 다른 페이지들에 접근할 수 있을까?

이 부분은 우리가 경로를 직접 설정한 Route 컴포넌트 말고 다른 두 개의 컴포넌트 Router와 Routes를 보면서 생각해볼 수 있다.

Routes는 각각의 Route 컴포넌트들이 이 아래에 있다는 걸 알려주는 역할을 한다. Router 컴포넌트는 리액트 돔에게 안에 뭐가 있던간에, 그 안에 있는 요소들이 리액트 라우터 돔 기능을 사용할 수 있다는 것을 알려주는 것이다.

우리가 navbar를 만들어보고 싶다고 생각해보자. 먼저 import하는 부분에 Link 컴포넌트에 대해서도 추가가 필요하다.

라우터 컴포넌트 안에 div를 추가하고, Link에 to 속성으로 경로를 설정해주면 된다.

<div>Navbar 
                <Link to="/"> Home </Link>
                <Link to="/menu"> Menu </Link>
                <Link to="/contact"> Contact </Link></div>

그러면 우리가 어디로 가든 위의 네비게이션 바를 볼 수 있게 된다.

<div className = "App">
            <Router>
                <div>Navbar 
                <Link to="/"> Home </Link>
                <Link to="/menu"> Menu </Link>
                <Link to="/contact"> Contact </Link></div>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/menu" element={<Menu/>}/>
                    <Route path="/contact" element={<Contact/>}/>
                    <Route path="*" element={<h1>404</h1>}/>
                </Routes>
            </Router>

        </div>

그런데 어떻게 어디로 가든 페이지에 상관없이 계속 네비게이션 바를 볼 수 있는 것일까?

그 이유는 우리가 작성한 네비게이션이 Routes 컴포넌트 위에 위치해있기 때문이다. 우리는 React dom에게 div 부분은 웹사이트의 일부이고, 그 아래 Routes 부분이 변하는 것이라고 알려주는 것이다.

리액트 라우터에 관련한 모든 것은 Router 컴포넌트 안에 있어야 하기 때문에 우리는 네비게이션 바를 담당하는 div를 Router안에 넣었고, Routes 위에 설정하여 그 부분은 Route에 따라 영향을 받지 않도록 한 것이다.

그리고 더 코드를 깔끔해보이게 하고 싶으면 당연히 Navbar라는 컴포넌트를 따로 파서 import해서 사용할 수 있다.

API

API란, 간단하게 내가 외부에서 가져와서 내 프로그램 안에 쓸 수 있는 데이터를 말한다.

데이터를 묘사하는 json으로 되어있다.

https://catfact.ninja/fact

이 링크는 랜덤한 고양이에 대한 사실을 알려주는 api이다.

fetch()

이제 위에 나오는 고양이 사실을 React app에 가져와서 fetch해보자.

fetch("https://catfact.ninja/fact")
    .then((res) => res.json())
    .then((data => {console.log(data);
}))

먼저 fetch() 함수를 통해서 api링크에 있는 데이터를 가져올 수 있다. 그리고 fetch().then()을 이용하여 응답 객체를 받아온다. fetch가 받아온 응답 객체인 res를 res.json으로 json 형식으로 변환해준다. json으로 변환된 data를 console에 출력한다.

Axios

Axios.get("https://catfact.ninja/fact").then((res) => {
    console.log(res.data);
})

위의 것과 같은 방법을 axios를 이용해서 할 수 있다.

Axios.get("https://catfact.ninja/fact").then((res) => {
            setCatFact(res.data.fact);
        })

그러나 이 상태에서는 catFact가 무한히 바뀌게 된다. 컴포넌트가 새로고침 될 때마다 렌더링이 실행되는데, 그 때 setCatFact를 설정함녀서 또 새로고침이 되기 때문이다.

따라서 useEffect를 사용하면 이 문제가 해결된다. useEffect는 컴포넌트가 렌더링(화면에 그려지는 것) 될 때, 특정한 작업을 실행하도록 한다.

useEffect(() => {
  // 여기서 실행하고 싶은 작업을 작성해요!
}, [의존성 배열]);

실행하고 싶은 함수를 설정하고, 의존성 배열에 어떠한 값을 넣으면 그 값이 변화할 때마다 useEffect가 실행된다.

useEffect (() => {
        Axios.get("https://catfact.ninja/fact").then((res) => {
                setCatFact(res.data.fact);
            });
    }, [])

이렇게 하면 useEffect에 의해서 비어있는 의존성 배열을 보고 컴포넌트가 처음 실행될 때 한 번만 useEffect가 나타나게 된다.

import "./App.css";
import Axios from "axios";
import { useState, useEffect } from "react";


function App () {
    const [catFact, setCatFact] = useState("");

    const fetchCatFact = () => {
            Axios.get("https://catfact.ninja/fact").then((res) => {
                setCatFact(res.data.fact);
            });
    }

    useEffect (() => {
        fetchCatFact();
    }, [])

    return (
        <div className = "App">
            <button onClick={fetchCatFact}> Generate Cat Fact </button>
            <p>{catFact}</p>
        </div>
    )
}

export default App;

결론적으로, 위의 코드는 먼저 fetchCatFact함수를 정의하여 Axios를 이용해 api에서 정보를 끌어다가 json을 js 객체로 만들어 catFact의 값을 변화시킨다.

그리고 useEffect를 사용하여 유저가 보는 첫 화면부터 catFact가 보이도록 한다. (fetchCatFact가 실행되면서 리렌더링되니까)

그리고 유저가 버튼을 누를 경우, fetchCatFact를 실행시켜서 유저에게 새로 api에서 가져온 정보를 보여주게 된다!

api에서 검색하기

agify.api를 이용해서 이름을 검색하면 유추되는 나이를 보여주는 프로그램을 만들어보자.

import "./App.css";
import Axios from "axios";
import { useState, useEffect } from "react";


function App () {

    const fetchData = () => {
        Axios.get("https://api.agify.io/?name=")
    };

    return (
        <div className = "App">
            <input placeholder="Guess the age!"></input>
            <button onClick={fetchData}> Generate Cat Fact </button>

            <h1>Predicted age</h1>
        </div>
    )
}

export default App;

이 프로그램이 검색한 이름에 대한 데이터를 불러오려면, input에 입력된 텍스트를 api 링크에 덧붙여서 해당 이름에 대한 링크를 찾고, 가져와서 보여주어야 한다.

 <div className = "App">
            <input placeholder="Guess the age!" onChange={(event) => {setName(event.target.value)}}></input>
            <button onClick={fetchData}> Generate Cat Fact </button>

            <h1>Predicted age</h1>
        </div>

먼저 인풋에 들어오는 글자에 따라, event의 데이터를 이름으로 세팅한다. 그리고 위에 있던 링크에 이어 이름을 붙여주면 되는데... "링크"+name 처럼 써서 자바스크립트식 스트링 더하기를 해줘도 되지만, 변수를 스트링 안에 포함하고 싶다면 방법이 있다.

Axios.get(`https://api.agify.io/?name=${name}`)

이렇게 백틱 사이에 string을 두고 ${} 안에 넣고 싶은 변수를 추가하면 스트링 안에 변수를 넣을 수 있다! (참고로 맥북에서 백틱을 입력하는 방법은 옵션키+₩이다.)

 Axios.get(`https://api.agify.io/?name=${name}`).then((res)=>setPredictedAge(res.data.age))

그리고 이렇게 가져온 데이터를 PredictedAge를 세팅하는 useState를 이용해 세팅해주고, 표시해주면 된다.

import "./App.css";
import Axios from "axios";
import { useState, useEffect } from "react";


function App () {

    const [name, setName] = useState("");
    const [predictedAge, setPredictedAge] = useState(0);
    const fetchData = () => {
        Axios.get(`https://api.agify.io/?name=${name}`).then((res)=>setPredictedAge(res.data.age));
    };

    return (
        <div className = "App">
            <input placeholder="Guess the age!" onChange={(event) => {setName(event.target.value)}}></input>
            <button onClick={fetchData}> Search </button>

            <h1>{predictedAge}</h1>
        </div>
    )
}

export default App;

만약 이 api에 있는 나이 뿐만 아니라 다른 정보 (count, name)도 같이 가져오고 싶으면 fetch하는 대상을 전체 데이터로 두고, predicted age를 object로 가져온다.

<h1>{predictedAge.age}</h1>

데이터를 객체로 가져왔기 때문에 위와 같이 표시해주면 되는데, 이렇게 쓰면 첫 렌더링 당시에는 객체를 가지고 오지 않은 상태라서 띄울 수 있는 게 없다.

때문에 이렇게 적어서 predictedAge가 존재할 때만 age에 접근하게 만들어주면 된다.

<h1>{predictedAge?.age}</h1>

최종 결과물

import "./App.css";
import Axios from "axios";
import { useState, useEffect } from "react";


function App () {

    const [name, setName] = useState("");
    const [predictedAge, setPredictedAge] = useState(0);
    const fetchData = () => {
        Axios.get(`https://api.agify.io/?name=${name}`).then((res)=>setPredictedAge(res.data.age))
    };

    return (
        <div className = "App">
            <input placeholder="Guess the age!" onChange={(event) => {setName(event.target.value)}}></input>
            <button onClick={fetchData}> Search </button>

            <h1>{predictedAge}</h1>
        </div>
    )
}

export default App;

Lifecycle of components

Lifecycle

컴포넌트의 라이프 사이클이란 말 그대로 컴포넌트가 태어나서 죽을 때까지의 사이클을 말한다.

1. mounting: 컴포넌트가 프로젝트에 등장하고 화면에 보여지는 단계
2. updating: props의 변화 등으로 인해 해당 컴포넌트가 업데이트됨. 즉, 변화함.
3. unmounting: mounting의 반대로 사라지는 단계.

updating은 props, state의 변화 등으로 글씨가 보이거나 보이지 않거나, 내용이 바뀌거나 등의 상태를 말한다.

만약 showText버튼을 눌러서 글씨를 표현할 수 있는 div가 코드 안에 나타났다면, 처음으로 태그가 나타난 이 순간은 해당 div의 mounting이라고 할 수 있다.

그리고 input 필드에 내용을 입력해서 화면에 div 안에 표시되는 텍스트가 나타나기 시작했다면, 이것은 모두 updating이다.

unmounting은 어떻게 이해할 수 있을까??

UseEffect

useEffect(() => {console.log("component mounted")})

UseEffect는 어떠한 component가 mount될 때 어떠한 동작을 실행하게 해준다.

useEffect를 사용할 때는 해당 컴포넌트가 나타날 때 어떤 동작을 같이 실행시키고자 하는 경우이다. 즉, state change가 일어나는 경우라고 할 수 있다.

따라서 컴포넌트가 받는 props가 변하거나, component 안의 state가 변하는 등의 이유로 ui가 re-render될 때마다 useEffect가 실행된다고 할 수 있다.

useEffect(() => {console.log("component mounted")};, [])

useEffect 뒤에는 배열을 추가할 수 있는데, 이 배열은 useEffect를 어떤 요소들만 useEffect를 발동시킬 수 이쓴지 특정화 하는 것이다.

그러면 만약에 우리가 컴포넌트를 unmount할 때 특정 동작을 실행하도록 하고싶다면 어떻게 하면 될까?

useEffect(() => {console.log("component mounted");

    return () => {
        console.log("component unmounted");
    }

};, [])

이렇게 하면 텍스트가 나타나고 업데이트 될 때는 component mounted가 뜨고, 업데이트를 지울 때는 component unmounted가 뜰 것이다.

어떤 component가 api에서 데이터를 가져와서 쓰고 있는데, component의 역할이 끝나면 api 데이터를 그만 써도 된다고 생각해보자.

만약 그렇다면, componet의 수명이 끝났을 때 api 데이터를 그만 쓰도록 하면서 실행되는 동작들을 정리해줄 수 있을 것이다.

React Strict Mode

<React.StrictMode> 라는 태그가 있다.

이 태그는 React의 컴포넌트가 만들어질 때 mount->unmount->mount의 과정으로 태그를 검증해준다고 한다.

import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <button onClick={setCount(count + 1)}>Increase</button>
      <button onClick={setCount(count - 1)}>Decrease</button>
      <button onClick={setCount(0)}>Set to Zero</button>

      {count}
    </div>
  );
}

export default App;

버튼을 눌러서 카운트를 세는 앱을 만드려고 했다. 그래서 useState를 이용해서 버튼을 누를 때 카운트를 올려줄 수 있게 setCount를 만들어서 호출했는데 ,렌더링 횟수가 무한 루프에 빠질 수 있기 때문에 안 된단다. 왜그렇지??

리액트 컴포넌트는 state가 변경 될 때마다 다시 렌더링 된다. 이것이 근본적으로 화면을 우리가 매번 새로고침 할 필요 없이 UI를 갱신시켜주는 state의 고마운 역할이다.

컴포넌트의 렌더링 과정에서 리액트는 JSX를 읽고, 그 안에서 함수를 호출한다.

<button onClick={setCount(count + 1)}>Increase</button>

이 코드에서 setCount(count+1)은 onClick 이벤트 핸들러로 전달되기 전에 즉시 실행된다.

나는 setCount가 onClick에 의해 실행될거라고 생각해서 문제가 없을 거라 느꼈는데 뭐가 문제인걸까?

생각

함수 호출과 함수 전달의 차이

• 함수 호출: setCount(count+1) 처럼 괄호를 통해 함수를 호출하면 함수가 그 즉시 실행된다.
• 함수 전달: () => setCount(count+1)처럼 화살표 함수를 사용하면 이 함수는 나중에 호출되기 위해 전달만 되고, 실행되지 않는다.

리액트 컴포넌트의 렌더링 과정

리액트 컴포넌트는 렌더링 될 때 JSX 내부의 모든 코드를 평가한다. JSX는 HTML+JS이기 때문에 렌더링 중에 자바스크립트 코드가 실행된다.

이 때 setCount(count+1)은 함수 호출이기 때문에 onClick 핸들러로 전달되기 전 즉시 실행되고, setCount(count+1)은 리액트에 의해 즉시 실행되어 onClick에 전달되고자 한다.

이 과정에서 state가 변경되어 리액트가 다시 컴포넌트를 렌더링하게 된다. 이 때 또 JSX를 평가하면서 setCount가 다시 실행되고... 하면서 무한루프에 빠지게 된다.

고칠 점은?

따라서 setCount가 버튼을 클릭할 때만 호출되기를 원하면 onClick속성에 함수를 호출하는 것이 아니라 함수 자체를 전달해야 한다.

방법 1

<button onClick={() => setCount(count + 1)}>Increase</button>

익명함수를 이용해서 새로운 함수를 정의한다. 그리고 그 함수 자체를 전달한다.

방법2

increasement = () => {
    setCount(count+1);
}

<button onClick={increasement}>Increase</button>

increasement라는 함수를 따로 만들어서 전달한다.

요약

• 함수 정의 (const increasement = () => { ... };): 함수가 정의될 뿐, 아직 실행되지 않습니다.
• 함수 전달 (onClick={increasement}): 리액트는 이 함수를 클릭할 때만 실행하도록 저장해둡니다.
• 함수 호출 (setCount(count + 1)): 즉시 실행되며, 이 경우에는 렌더링 시점에 실행되므로 무한 루프의 원인이 됩니다.

button에서의 활용

import "./App.css";

function App() {
  const age = 0
  const increaseAge = () => {
    age = age+1;
    console.log(age);
  };
 return (
  <div className="App">
    {age} 
    <button onClick={increaseAge}> Increase age</button>
  </div>
 );
}

export default App;

리액트에서도 js처럼 버튼을 만들어서 숫자를 올리고 싶다면 어떻게 하면 될까? 이렇게 코드를 써서 increaseAge 함수를 버튼에 연결해줬다고 생각했는데, 이상하게도 작동되지 않는다. 왜일까?

왜냐면 age를 우리가 const로 설정했기 때문이다. 그런데 우리가 그것을 let으로 바꿔줘도 화면에 표시된 0은 변하지 않는다. 그런데 이상하게도 콘솔에 찍히는 숫자는 계속 올라가고 있다...

왜냐면 변수는 변하고 있지만, 화면은 변하고 있지 않기 때문이다. 이게 무슨 말일까?

리액트는 처음 실행되면 App 컴포넌트를 한 번 렌더링 한다. 렌더링한다는 것은 이 App 컴포넌트에 따라 UI를 생성한다는 것이다.

그래서 처음에는 당연히 age가 0이라고 표시되고, 변수가 뭐라 변하든 리액트는 변수의 변화는 눈치채지 못한 채 컴포넌트 기준으로 0을 UI에 표시하고 있는 것이다.

그냥 JS에서는 document.get을 통해서 html로 표시되는 UI에 변수 변화를 가져올 수 있었겠지만, 리액트에서는 그 방법이 다르다. 바로 useState라는 hook을 사용하면 된다.

import {useState} from 'react'

hook는 리액트에서 사용하는 개념으로, use로 시작하는 일종의 함수이다.

useState는 state를 만들어서 사용하기 위해 쓰는 hook이다. 예를들어서 우리가 age라는 state를 만들고 이것을 변화시키는 함수를 만든다고 생각해보자.

const [age, setAge] = useState()

이것이 바로 useState의 구조이다. () 안에는 useState의 초깃값을 넣을 수 있다. age라는 변수를 만들어주고, age라는 변수를 변화시키는 setAge라는 함수와의 세트를 짝지어 준 것이다.

const [age, setAge] = useState(1);

  const increaseAge = () => {
    setAge(age+1);
  };

이와 같이 코드를 작성하면 increaseAge 함수가 작동할 때마다 age가 setAge() 안에 설정된 값(1살 늘어나기)으로 변화할 것이다.

그 이유는 바로 state의 정체성이 설정된 변수가 변하면 리액트에게 알려주어서 다시 렌더링하도록 트리거가 되기 때문이다. 그러면서 새로 갱신된 state의 변수를 반영할 수 있다.

input에서 state 활용

만약 내가 화면에 텍스트를 넣을 수 있는 input이 있고, 이 input에 들어가는 글자를 바로 화면에 state를 이용해서 띄우고 싶다면 어떻게 해야 할까?

const [inputValue, setInputValue] = useState("");
...
<div className="App">
      <input type="text" onChange={} />
      {inputValue}
    </div>

이렇게만 하면 당연히 변화는 없다. 그래서 우리는 onChange를 이용해서 input에 변화가 생기면 event 전달을 통해 inputValue가 바뀔 수 있도록 해줄 것이다.

function App() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <div className="App">
      <input type="text" onChange={handleInputChange} />
      {inputValue}
    </div>
  );
}

이처럼 handleInputChange함수에서 event를 전달받아 input의 정보를 끌어오고, event.target.value로 현재 값을 가져와서 변화가 생길 때마다 화면에 반영해줄 수 있다.

boolean 값으로의 활용

function App() {
  const [showText, setShowText] = useState(false);

  return (
    <div className="App">
      <button> Show/Hide </button>
      {showText === true && <h1>Hi this is text.</h1>}
    </div>
  );
}

이 코드에서는 showText라는 state를 가지고 boolean 값에 따라 h1태그로 쓰여진 글을 보여줄지 말지를 결정한다.

위의 버튼을 눌렀을 때 글자가 보이는지를 결정하려면 어떻게 하면 좋을까?

function App() {
  const [showText, setShowText] = useState(false);

  return (
    <div className="App">
      <button onClick={() => {setShowText(!showText)}}> Show/Hide </button>
      {showText === true && <h1>Hi this is text.</h1>}
    </div>
  );
}

onClick 안에 익명 함수로 setShowText가 showText를 반대로 만듦으로써 버튼을 누를 때 현재 상태를 반전시켜 글씨를 보여주거나 숨길 수 있게 된다.

색깔 바꾸기

그러면 버튼을 누르면 이번엔 색깔을 바꾸려면 어떻게 해보면 좋을까? 이것도 마찬가지로, h1 태그 안에 바로 CSS 중 color를 바꾸도록 해서 onClick에 대해 색깔을 바꾸는 익명 함수를 추가해주면 된다.

당연히 이 때, h1태그 안에서 style, color를 textColor로 설정해주어야 state를 이용해서 색 변경을 적용시킬 수 있다.

function App() {
  const [textColor, setTextColor] = useState("green");

  return (
    <div className="App">
      <button
        onClick={() => {
          setTextColor("red");
        }}
      >
        color change
      </button>
      <h1 style={{ color: textColor }}>Hi this is text.</h1>
    </div>
  );
}

만약 글씨가 빨강일 때 누르면 초록, 초록일 때 누르면 빨강으로 스위치 되기를 원하면 삼항연산자를 이용해서 조건에 따라 글자 색이 바뀌도록 익명함수를 써줄 수 있다.

function App() {
  const [textColor, setTextColor] = useState("green");

  return (
    <div className="App">
      <button
        onClick={() => {
          setTextColor(textColor === "green" ? "red" : "green");
        }}
      >
        color change
      </button>
      <h1 style={{ color: textColor }}>Hi this is text.</h1>
    </div>
  );
}

import "./App.css";

function App() {
 return (
  <div className="App">
    <h1 className="name"> Pedro </h1>
  </div>
 );
}

export default App;

이 코드를 보면 App.css라는 파일을 불러오고 있다는 걸 알 수 있다. 이 css파일은 App.js의 스타일을 관리한다. css를 사용하고 싶다면 파일 위치를 가져와서 import하면 해당 파일에서 사용할 수 있게 된다.

Module Stylesheets

위처럼 import하는 방법 외에도 모듈 스타일시트를 사용하는 방법도 있다. App.css가 아니라 App.moudle.css가 있다고 생각해보자. 그런 경우에는

import sytles from "./App.module.css";

function App() {
 return (
  <div className={styles.App}>
    <h1 className={styles.App}> Pedro </h1>
  </div>
 );
}

export default App;

이렇게 해도 import하는 것과 똑같이 작동한다.

Conditional Rendering

여기서는 전에 우리가 공부한 삼항연산자가 등장한다. 만약 조건을 만족하면 이거고, 아니면 저거다. 를 나타내는 연산자이다.

리액트에서 조건부 렌더링을 하는 가장 쉬운 방법은 if문을 이용하는 것이다.

import sytles from "./App.module.css";

function App() {
 return (
  const age = 19;

  if (age>=18){ 
      return <h1>overage</h1> ;
  }
      else {
      return <h1>underage</h1> ;
  }
 );
}

export default App;

이렇게 하면 나이가 18살 이상인 경우 overage, 미만이면 underage를 보여준다. 그러면 이 연산을 삼항연산자로 나타내면 어떻게 될까?

import sytles from "./App.module.css";

function App() {

const age = 19;

 return <div className = "App">{age >=18 ? <h1> overage </h1> : <h1> underage </h1>}</div>
}

export default App;

색깔 바꾸기 (css 적용)

위의 코드에 한 줄을 더 추가해서 isGreen이라는 boolean 변수가 추가되었다고 생각해보자. 그리고 이 변수가 참이면 글씨는 초록색이고, 아닐 경우 글씨는 빨간색(디폴트)으로 보여진다.

마찬가지의 원리로 isGreen이 참이면 버튼을 보여주고 아닐 경우 버튼을 보여주지 않는 방식도 가능하다.

import sytles from "./App.module.css";

function App() {
const age = 19;
cosnt isGreen = true;

 return(<div className = "App">
    {age >=18 ? <h1> overage </h1> : <h1> underage </h1>}
     <h1 style={{color: isGreen && "green" : "red"}}>isGreen?</h1>
    {isGreen && <button> This is a button </button>}
 </div>
);
}

export default App;

React에서 list 사용하기

배열

import "./App.css";

function App() {
 const names = {"Pedro", "Jake", "Jessica", "Mike", "Dustin"};
 return (
  <div className="App">
    <h1> {names[0]}</h1>
  </div>
 );
}

export default App;

우리가 이름 배열을 가지고 있고, 그것을 보여주고 싶다고 생각해보자. 만약 저 위의 코드처럼 0번 이름을 보여주는 것에서 그치지 않고, 모든 이름들을 다 보여주고 싶다면 어떻게 해야할까?

자바스크립트의 배열 함수인 forEach를 쓸 수도 있지만, 오늘 사용할 것은 map()이다.

map 함수는 배열에 들어있는 각각의 요소를 집어서 각각에 대한 요소를 변경할 수 있다는 장점이 있다.

map 함수는 인자로 callback함수를 필요로 한다. 콜백 함수는 이름이 없는 익명 함수로, value와 key를 받아서 map 다음으로 실행할 것들을 나타낸다.

key는 예를 들면 각 배열의 index라고 할 수 있을 것이고, value는 각 배열의 실제 내용, 즉 Jake, Pedro 같은 이름이 될 것이다. 이 value와 key는 콜 백 함수 내에서 원하는 대로 이름 붙여 쓸 수 있다. 아래 코드에서는 value를 알아보기 쉽게 name으로 명명했다.

*jsx나 html 사이에 js를 쓰고 싶으면 항상 {}로 감싸야 된다는 것을 잊지 말자.

import "./App.css";

function App() {
 const names = {"Pedro", "Jake", "Jessica", "Mike", "Dustin"};

 return (
  <div className="App">
    {names.map((name, key) => {
        return <h1 key={key}> {name} </h1> //key를 넘겨줌
    })}
  </div>
 );
}

export default App;

객체

import "./App.css";

function App() {
 const users = [
 {name: "Pedro", age: 21 },
 {name: "Jake", age:25}, 
 {name: "Jessica", age:45 },
];

 return (
  <div className="App">
    {names.map((name, key) => {
        return <h1 key={key}> {name} </h1> //key를 넘겨줌
    })}
  </div>
 );
}

export default App;

우리는 이제 유저의 이름과 나이를 가진 객체 배열을 가지고 있다. 이름과 나이를 화면에 표시하려면 어떻게 해야 할까?

import "./App.css";

function App() {
 const users = [
 {name: "Pedro", age: 21 },
 {name: "Jake", age:25}, 
 {name: "Jessica", age:45 },
];

 return (
  <div className="App">
    {users.map((user, key) => { //users배열을 매핑하도록 코드 변경
        return <div> {user} </div>;
    })}
  </div>
 );
}

export default App;

안타깝게도 위 코드는 작동하지 않는다. 왜냐하면 {user}만 넘겨주는 건 배열이었으면 가능하지만, 객체의 경우 user.name, user.age 처럼 객체의 무엇을 표시할 것인지를 명시해주어야 하기 때문이다.

그리고 이어서 생각해보면, return하는 div태그 안에 {user.name}, {user.age}를 넣는 대신 유저의 정보를 표시해주는 컴포넌트를 작성해서 리턴시켜줄 수도 있다.

import "./App.css";

function App() {
 const users = [
 {name: "Pedro", age: 21 },
 {name: "Jake", age:25}, 
 {name: "Jessica", age:45 },
];

 return (
  <div className="App">
   {users.map((user, key) => {
        return  <User name={user.name}, age={user.age}/>;
    })}
  </div>
 );
}

const User = (props) => {
    return (
       <div> {props.name} {props.age} </div>
    );
}

export default App;

이 때 컴포넌트에서 props를 받아오는 방법은 뭘까? User 컴포넌트를 사용할 때, 태그 안에서 props에 들어갈 부분을 할당시켜 주는 것이다.

<User name={user.name}, age={user.age}/>

이렇게 하면 컴포넌트에서 필요로 하는 props와 map 함수에 전달된 객체들의 요소를 연결해줄 수 있다.

https://www.youtube.com/watch?v=N6E9ZsiWUyQ&list=PLpPqplz6dKxW5ZfERUPoYTtNUNvrEebAR&index=4

import logo from "./logo.svg";
import "./App.css";

function App() {
  const name = "Herminoe";
  return <div className="App">
      <h1>{name}</h1>
  </div>;
}

export default App;

위 코드에서는 자바스크립트 변수로 선언한 string name이 html안에 {} 속에 들어가 표시되고 있다.

그리고 html 태그 사이에 이름을 끼워넣는 것 뿐만 아니라, 사용된 html 태그 자체를 변수처럼 사용할 수도 있다. 즉, ui를 변수에 저장해서 쓸 수 있다!

import logo from "./logo.svg";
import "./App.css";

function App() {
  const name = <h1>Hermione</h1>;
  return <div className="App">
      {name}
  </div>;
}

export default App;

그런데 만약 우리가 여러명의 유저의 정보를 받아서 어딘가에 넣어야 한다면 어떻게 하면 좋을까?

import logo from "./logo.svg";
import "./App.css";

function App() {
  const name = <h1>Hermione</h1>;
  const age = <h2>11</h2>;
  const house = <h2>Gryffindor</h2>;
  return <div className="App">
      {name}
    {age}
    {house}
    {name}
    {age}
    {house}
    {name}
    {age}
    {house}
  </div>;
}

export default App;

단순히 이렇게 늘어놓을 수도 있지만 너무 못생겼다.

이 때 우리가 배운 변수에 ui를 저장하는 방식을 쓸 수 있을 것이다.

import logo from "./logo.svg";
import "./App.css";

function App() {
  const name = <h1>Hermione</h1>;
  const age = <h2>11</h2>;
  const house = <h2>Gryffindor</h2>;
  const user = (
  <div>
      {name}
    {age}
    {house}
    </div>
  );

  return <div className="App">
      {user}
    {user}
    {user}
  </div>;
}

export default App;

이렇게 하면 더 깔끔하게 코드를 짤 수 있다~

Components

이렇게 각 변수에 ui를 저장하는 것보다 더 좋은 방법이 있다. 바로 프로젝트에 componet를 사용하는 것이다.

컴포넌트는 ui/JSX를 리턴하는 자바스크립트 함수이다.

const GetName = () => {
    return "Name";
};

cosnt GetNameComp = () =>{
    return <h1>Name</h1>;
}

위의 함수는 이름을 반환하는 자바스크립트 함수이고 아랫쪽은 html 태그를 반환하는, jsx로 이루어진 리액트 컴포넌트이다.

리액트 컴포넌트 이름은 반드시 대문자로 시작해야 한다는 규칙이 있다.

그러면 이 컴포넌트를 어떻게 사용하는걸까? 위에서 user에 해당하는 여러개의 태그를 하나의 변수로서 저장했다면, 이번엔 컴포넌트로 만들어볼 수 있다.

const User = () => {
<div>
    <h1>Hermione</h1>
      <h2>11</h2>
      <h2>Gryffindor</h2>
<div>
}

이렇게 하면 이 User라는 이름의 컴포넌트는 그 안에 있는 태그들을 묶은 div를 반환하게 된다. 이렇게 만든 컴포넌트는 App 컴포넌트 안에 넣어서 UI에 표시되게 할 수 있다.

APP 컴포넌트는 UI에 드러나는 부분이라고 생각하면 된다.

function App() {
     return (
        <div className="App">
            <User/>
        </div>

    );
  );

const User = () => {
<div>
    <h1>Hermione</h1>
      <h2>11</h2>
      <h2>Gryffindor</h2>
</div>
}

이런 식으로 우리가 만든 User 컴포넌트가 App 컴포넌트 안에 들어간 태그인 것 처럼 사용하면 UI로서 유저에게 보여지게 할 수 있다.

Props

보통의 자바스크립트 함수에서는 인자를 받아서 사용한다. 리액트에서는 이런 느낌으로 prop을 받아서 쓸 수 있다.

Props는 일종의 어떤 컴포넌트 안에 존재하는/받아서 쓰는 자바스크립트 객체이다. 그리고 이 props는 아마 우리가 그 컴포넌트 안에서 쓰고싶어하는 모든 데이터를 나타낼 것이다. props는 아마 이렇게 생긴 느낌이라고 생각하면 쉬울 것이다.

const props = {
    name: "Hermione",
    age: 11,
    house:Gryffindor,
}

그래서 따로따로 필요한 영역을 채워주는 것 대신에, 우리는 이렇게 쓸 수 있다.

function App() {
     return (
        <div className="App">
            <User name="Hermione" age={11} house={Gryffindor}/>
            <User name="Ron" age={10} house={Gryffindor}/>
            <User name="Malfoy" age={11} house={Slytherine}/>
        </div>

    );
  );

const User = (props) => {
<div>
    <h1>{props.name}</h1>
      <h2>{props.age}</h2>
      <h2>{props.house}</h2>
</div>
}

이렇게 하면 user 컴포넌트에 들어가는 정보만 수정하고도 각자 다른 세 명의 유저를 ui에 나타낼 수 있다.

다른 예시 component

const Job = (props) => {

return (
    <div>
      <h1>{props.salary}</h1>
      <h2>{props.position}</h2>
      <h2>{props.company}</h2>
    </div>
    );
}

DOM은 웹페이지의 나타냄 같은 것으로, 자바스크립트와 소통한다. 트리 같은 구조로, 각 노드가 html 페이지에 해당한다.

JS는 DOM을 이용해서 html에 interactivity를 추가한다고 할 수 있다. 그러나 DOM이 각각의 태그를 잡아서 하나하나 다 바꾼다고 생각하면 조금 비효율적일 수 있다.

그래서 React가 좋은 새로운 방법으로 등장했는데, 리액트는 DOM이 나타내는 것의 가상 복사본, virtual DOM을 만든다. 이 virtual DOM은 진짜 DOM에 변화를 일으킬 때 가장 적절하고 효율적인 방법을 찾아서 결정하는 역할을 한다.

그래서 React는 사실 진짜 JS는 아니고 HTML과 JS의 짬뽕인 JSX라는 것으로 이루어져있다. 리액트의 virtual DOM에 의해서 최적화된 웹사이트의 동작을 할 수 있게 하고, 이렇게 할 때 HTML안에 우리가 직접 JS 코드를 집어넣으면서 코딩을 할 수 있는 것이다.

Import & Export Notation

원래 자바스크립트에서는 JS를 쓰기 위해서는 HTML 페이지에서 사용하려면 < script > 태그를 써서 링크를 걸어서 불러와주어야 한다.

리액트에서는 import와 export에 해당하는 선언이 따로 있다.

import axios from "axios";
export const {Object};

Ternary Operators & Conditionals

이전 글에서 다뤘는데 페드로씨가 이번 영상에서도 얘기하길래 한 번 더 필기하고 넘어가겠다.

?는 if에 해당하고, :는 조건에 따른 결과에 해당한다.

let myAge = 18;
let isAcceptable = true;

if (myAge>18) {
    isAcceptable = true;
}else{
    isAcceptable = false;
}

isAcceptable = myAge > 18 ? true : false;

위의 두 코드 뭉치는 같은 의미를 나타낸다. 조금 더 ui와 맞닿아있는 예시를 들어서 생각해보자. 퀴즈를 맞추냐 틀리느냐에 따라 색깔이 초록/빨강으로 변한다고 생각하자.

let color = "green"
let isCorrect = false

color = isCorrect ? green : red;
//(혹은) color = isCorrect && green;

이렇게 코드 줄 수를 줄이면서 효율적으로 코딩할 수 있게 해주는 것이 ternary operator, 삼항연산자이다.

Optional Chaining

리액트를 이용하는 중에, 쓰고자 하는 데이터가 명확하지 않거나 순서가 잘못되면 작동이 잘못 되는 경우가 많다.

JS의 기본 규칙인 데이터를 사용하기 전에 미리 불러와야 한다. 는 것을 지키지 않는다면 곤란해진다.

const fetchData = async () => {
    const data = await fetch("imaginaryapi.com");
    const name = data.person.name;
}

이 코드에서 데이터를 fetch하기도 전에 데이터에 접근해서 사람의 이름을 사용하려고 하는 것이 그런 곤란한 경우 중 하나일 것이다. 필드가 존재하기도 전에 필드에 접근하려고 하는 것이다.

그래서 어떤 객체의 특정한 key에 접근하고자 한다면, 그 key가 존재할 때만 시도해야 한다.

const fetchData = async () => {
    const data = await fetch("imaginaryapi.com");
    const name = data.person?.name;
}

위 코드에서는 ?을 추가해서 사람의 데이터가 존재하는 경우에만 이름에 접근하도록 하고 있다. 그리고 이것은 어떤 객체에 접근하든지 ?을 붙여서 사용할 수 있기 때문에 에러를 막는 데에 매우 유용하다.

참고 영상: https://www.youtube.com/watch?v=ACaT1Gfhe6I

함수 컴포넌트에 유용한 형태

fucntion DoSomething () {

}

위 함수를 화살표 함수로 똑같이 나타내면

const DoSomething = () => {

}

형태로 쓸 수 있다. 지금 보기에는 그냥 몇 가지 요소를 더 써서 오히려 귀찮은 것 같지만, 나중에 callback function을 많이 쓸 때는 이 형태가 더 편하다고 하니 기억해두자.

그리고 이 경우 export 하는 모양이 조금 다른데, 화살표함수는 export default 라고 쓰지 않고 그냥 export만 앞에 붙여줘도 된다고 한다.

리액트 프로그래밍은 컴포넌트의 조합인데, 컴포넌트가 함수로 이루어지기 때문에 리액트에서 함수는 정말 중요하다.

const Myfunction = (props) => {
    return <div>something html</div>
}

위의 모양이 함수 컴포넌트의 기본이 되는 형태라고 볼 수 있다.

익명함수

버튼이 있다고 생각해보자. 보통은 onClick 뒤에 함수 이름을 넣어서 버튼을 작동하도록 만든다. 그러나 인라인 함수로 onClick에 대해서 직접 선언해서 사용하는 방법을 쓸 수 있다.

<button onClick={ 
    {console.log("Hello")} }> 
</button>

그리고 차라리 이 방법이 나을 때도 있다. 따로 함수를 선언하지 않고 바로 만들어 쓸 수 있기 때문이다.

삼항연산자 (tenary operator)

삼항연산자, tenary operator는 코드가 너무 길게 늘어나지 않고 간결해질 수 있도록 도와준다.

let age = 10;
let name = "Pedro";

if (age>10){
    name = "Jack";
}else{
    name = "Pedro";
}

위와 같은 코드가 있다고 하자. 우리는 지금 나이에 따라 이름을 달리 하는 코드에 벌써 6줄을 소비했다. 이 코드를 더 간결하게 쓰고싶으면 어떻게 하면 될까?

위에서 이름이 Pedro가 되게 하는 코드가 반복되니, 아예 변수 선언 단계에서 이 사람이 10살 이상이면 이름이 Pedro라고 선언되도록 해보자.

let age = 16;
let name = age > 10 && "Pedro";
//name을 Pedro라고 한다 (만약 age>10가 true인 경우)

if-else문의 경우 아래와 같이 나타낼 수 있다.

let age = 16;
let name = age > 10 ? "Pedro" : "Jack" ;
//name에 대해(만약 age>10가 true인 경우 Pedro, 아니면 Jack.)

? 앞의 조건이 참이면 첫 번째, :가 else처럼 쓰여서 아닐 경우 : 뒤의 값으로 정해진다고 생각하면 된다.

실제 리액트에서는 어떻게 사용될까?

const Component = () => {
    return age>10 ? <div> Pedro </div> : <div> Jack </div>

}

위와 같이 작성하면 조건에 따라서 다른 ui를 리턴해서 사용자에게 컴포넌트를 보여줄 수 있다. 아주 유용하다!

객체

객체 기본

const person = {
    nname: name,
    age: 20,
    isMarried: false,
}

이렇게 객체를 생성하면 아래와 같은 방법으로 person 객체 내부에 있는 특정한 값을 가져다 쓸 수 있다.

const name = person.name;
const age = person.age;
const isMarried = person.isMarried;

그런데 저 값들을 일일히 대응시켜주지 않아도 세 값을 객체에서 가져와서 쓰는 방법이 있다.

const {name, age, isMarried} = person;

이렇게 하면

const name = "Pedro";

const person = {
    name: name,
    age: 20,
    isMarried: false,
}

또한 위와 같은 방법으로 person 객체가 위에 있는 name변수의 값을 person 안의 name 값으로 쓸 수 있다.

만약 key value가 위에서 선언한 변수와 같은 이름을 가지고 있고, 그 값을 가져다 쓰고 싶다면

const name = "Pedro";
const age = 20;

const person = {
    name,
    age,
    isMarried: false,
}

이렇게 이름만 써주어도 된다.

Spread Operator

그러면 만약 내가 person2라는 객체를 만드는데, 다른 값은 다 똑같지만 이름만 바꾸어서 만들고 싶다면 어떻게 하면 좋을까? 객체를 복제하면서 딱 이름만 바꾸려면 어떻게 하면 좋을까?

const person = {
    nname: name,
    age: 20,
    isMarried: false,
}

const person2 = {...person}

위의 ... 표현은 spread operator로, 'everything'이라는 의미이다. 여기에 ... 뒤에 person이 있으니, person 객체의 모든 것을 가져온다는 뜻이다.

const person2 = {...person, name: "Jack"}

이 떄 코드 뒤에 , 하고 변수명을 붙여주면 'everything but'이라는 의미가 된다. 따라서 person의 모든 속성을 복사하면서, name은 그 대신 Jack으로 바꾼다는 의미이다.

배열 활용

이 방법을 배열에도 적용할 수 있다.

const names = ["Pedro", "Jack", "Jessica"]
const names2 = [...names, "Alley"];

만약 이렇게 코드를 작성하면 names 배열을 똑같이 names2로 가져오되, Alley라는 이름을 하나 더 추가한 배열을(size=4)생성하겠다는 의미이다.

배열에 활용하는 3가지 유용한 함수

.map()

let names = ["Pedro", "Jack", "Jessica"]

위와 같은 이름의 배열이 있다. 그런데 내가 갑자기 각 이름 뒤에 숫자1을 각각 붙여서 출력하고 싶다.

물론 배열 원본에 1을 추가해서 출력해도 되지만, map 함수를 사용하는 방법도 있다.

map 함수는 인자를 필요로 하는데, map 함수 안의 ()에는 적용할 함수를 적어줄 수 있고, 당연히 익명함수도 가능하다.

names.map((name) => {
    console.log(name)
})

이렇게 함수를 작성하면 names의 각각의 이름을 출력해줄 것이다. 이 때 map 안의 익명함수가 가지는 인자는 임의로 지정될 수 있다. (꼭 name이 아니어도 상관 없다는 뜻.)

만약 map 함수가 출력문이 아니라 return값을 가지면 어떨까?

names.map((name) => {
    return name + "1";
})

이렇게 되면 함수는 name에 1을 붙인 string을 리턴해서 names 배열을 변경할 것이다. 리액트에서는 return을 html 태그로 하면 UI를 변화시킬 수 있다.

names.map((name) => {
    return <h1>{name}</h1>
})

.filter()

let names = ["Pedro", "Jack", "Jessica", "Pedro", "Pedro"];

우리가 배열에 Pedro를 많이 가지고 있는데, Pedro라는 이름을 걸러내고 싶다고 생각해보자. 이 경우 filter 함수를 사용할 수 있다.

names.filter((name)=>{
    return name !== "Pedro";
    //조건 설정
})

이렇게 filter 함수는 리스트를 이용한 검색이나 필터링에 아주 유용하게 사용될 수 있다.

.reduce()

Async, Await, Fetch

웹 개발에서 API를 사용하려면 Async, Await, Fetch가 꼭 필요하다. 데이터를 요청하고 받아서 다루려면 알아야 하는 개념들이다.

#include <bits/stdc++.h>
using namespace std;

int arr [30] ={ 0 };

int main () {
    ios::sync_with_stdio(0);
    cin.tie(0);

    int num = 0;

    for (int i=0; i<28 ;i++){
       cin >> num;
       arr[num] = 1;
   }//낸 사람 체크박스 28개 체크

   for (int i=0; i<30; i++){
       if(arr[i]==0){
           cout << i << '\n';
       }

   }

}

맞은 코드

#include <bits/stdc++.h>
using namespace std;

int arr [30] ={ 0 };

int main () {
    ios::sync_with_stdio(0);
    cin.tie(0);

    int num = 0;
    int a = 0;

   for (int i=0; i<28 ;i++){
       cin >> num;
       arr[num] = 1;
   }//낸 사람 체크박스 28개 체크

   for (int i=0; i<30; i++){
       if(arr[i]==0){
           cout << i << '\n';
       }

   }

}

틀렸던 이유

왜 배열을 31로 해야 할까 생각이 많았는데 처음에 과제 낸 사람 체크할 때는 총 28개의 입력을 받기만 하면 되는 거라서 i가 0~28이어도 상관 없었다. 어차피 입력받은 num에 해당하는 arr[num] 부분의 값만 바꿔주면 특정 인덱스로 바로 찾아가는거라서...

그런데 이제 출력이랑 연관된 두 번째 for문에서는 i를 인덱스삼아서 처음부터 끝까지 체크박스를 훑다가(배열을 훑다가) 안 낸 사람을 바로 출력하는 것이라서 i가 1부터 시작해서 30까지 가야

이걸 헷갈려서 두 for문 다 0부터 시작하고, 바로 출력으로 입력하니까 두 번째 for문에서 계속 주소를 -1된 곳으로 찾아가고 그걸 출력해서 틀렸었다.

arr[2]에 0이 입력된 걸 보고 2를 출력해야 하는데, 없는 0번부터 시작해서 30번은 보지도 못하고... 전체 초기화를 0으로 했으니 입력이 없었던 0은 당연히 0을 제일 먼저 출력하니까 바로 틀림.

인덱스를 바로 출력해야되는거라서 인덱스가 30까지 있을 수 있게 배열 크기도 31로 선언했어야 하는 것이었다.

C++에서는 같은 이름을 가진 두 개의 함수가 존재 가능하다. 서로 다른 타입 혹은 갯수의 파라미터를 가지고 있는 한 두 개를 구분할 수 있다.

#include <iostream>
using namespace std;

int operate (int a, int b)
{
  return (a*b);
}

double operate (double a, double b)
{
  return (a/b);
}

int main ()
{
  int x=5,y=2;
  double n=5.0,m=2.0;
  cout << operate (x,y) << '\n';
  cout << operate (n,m) << '\n';
  return 0;
}

위 코드에서 두 함수는 operate라는 이름을 가지고 있다. 그러나 하나는 int타입을 파라미터로 가지고, 다른 하나는 double타입을 가지고 있다. 컴파일러는 이 경우 함수 호출 시에 넘겨진 타입을 기준으로 어떤 함수가 호출 된 것인지 구분한다.

이 예시에서, 두 함수는 서로 다른 내용을 가지고 있다는 걸 볼 수 있다. int 버전은 두 파라미터를 곱하지만 double 버전은 두 파라미터를 나눈다.

이렇게 하면 함수 이름은 같은데 기능이 달라서 매우 헷갈리기 때문에, 보통 오버로드 된 두 함수는 최소한 같은 기능을 가지고 있도록 하는 게 좋다. 가독성을 위해서라도!

이 때 오버로드 함수들끼리 리턴 타입을 기준으로 구분을 하지는 못한다. 최소한 파라미터 하나는 다른 타입을 가져야 구분할 수 있다.

Function templates

// overloaded functions
#include <iostream>
using namespace std;

int sum (int a, int b)
{
  return a+b;
}

double sum (double a, double b)
{
  return a+b;
}

int main ()
{
  cout << sum (10,20) << '\n';
  cout << sum (1.0,1.5) << '\n';
  return 0;
}

이 함수에서, 두 개의 오버로드 된 sum 함수들은 서로 다른 타입을 받지만 완전히 똑같은 몸통 부분을 가진다.

sum이라는 함수는 이름에서도 알 수 있듯, int, double, long long 뭐가 오든 똑같은 몸통을 가지게 될 가능성이 크다. 이러한 경우에 대비해서, C++은 제네릭 타입을 가진 함수를 정의할 수 있는 능력을 가지고 있다. 이것을 function templates라고 부른다.

function templates를 정의하는 것은 보통 함수를 정의하는 것이랑 똑같다. 그러나 함수를 쓰기 전에 template 키워드를 붙여주기만 하면 된다. 그리고 <> 안에 템플릿 파라미터를 써주면 된다.

template <typename T>
T add(T a, T b) {
    return a + b;
}

template 파라미터는

위에서 'typename'은 typename이라는 것이 함수 정의 내에서 어디서든 사용될 수 있도록 해준다. 그냥 다른 타입들처럼, 이 typename은 파라미터로 쓰이거나, return 타입으로 쓰일 수도 있고 새로운 변수를 선언할 수도 있다. 단순히 다른 타입들을 '일반화 시켜서'사용하는 것이라고 생각하면 되고, 템플릿이 어떤 타입으로 사용될지 결정되는 순간에 결정된다고 보면 된다.

타입을 구체화시키는 것은 function template을 호출해서 특정 타입이나 값을 결정시키는 것이다. 보통 함수를 호출하는 것과 같이 호출되지만 <> 안에 있던 타입을 결정하면서 호출된다고 보면 된다.

x = sum<int>(10,20);

이 예시는 sum 함수를 호출하는데, generic, 즉 일반화 되어있던 타입을 int로 결정해서 호출하겠다는 뜻이다.

// function template
#include <iostream>
using namespace std;

template <class T>
T sum (T a, T b)
{
  T result;
  result = a + b;
  return result;
}

int main () {
  int i=5, j=6, k;
  double f=2.0, g=0.5, h;
  k=sum<int>(i,j);
  h=sum<double>(f,g);
  cout << k << '\n';
  cout << h << '\n';
  return 0;
  }

이 예시에서 T는 템플릿 파라미터의 이름이고, 우리는 sum을 두 번 호출한다. 이 때 컴파일러는 각각에 맞는 타입을 특정화 시키고 각각에 맞는 버전의 함수를 호출해서 사용했다고 볼 수 있다.

그리고 이 때 sum 함수 안에서 T는 지역변수를 선언하는 타입으로도 사용되었다. 따라서 result는 sum이 호출되는 순간 자동으로 그 타입을 특정화시켜서 갖게 된다.

제네릭 타입이 sum의 파라미터로 쓰인 경우, 컴파일러는 똑똑하게도 자동으로 무슨 타입을 쓰고 싶은지 알아볼 수 있다.

따라서,

k = sum<int> (i,j);

가 아니라

k = sum (i,j);

로 쓰기만 해도 된다. 대신 들어가는 값이 모호해지면 컴파일러가 혼란스러워하기 때문에 이 점을 주의해야 한다.

함수 템플릿 안에서는 여러개의 템플릿 매개변수가 있을 수 있고, 그럼에도 여전히 자동으로 추측은 가능하다.

#include <iostream>
using namespace std;

template <class T, class U>
bool are_equal (T a, U b)
{
  return (a==b);
}

int main ()
{
  if (are_equal(10,10.0))
    cout << "x and y are equal\n";
  else
    cout << "x and y are not equal\n";
  return 0;
}

이러한 코드가 있을 때,

are_equal(10,10.0)

은

are_equal<int,double>(10,10.0)

로 추론된다.

Non-type template arguments

// template arguments
#include <iostream>
using namespace std;

template <class T, int N>
T fixed_multiply (T val)
{
  return val * N;
}

int main() {
  std::cout << fixed_multiply<int,2>(10) << '\n';
  std::cout << fixed_multiply<int,3>(10) << '\n';
}

이 함수의 두 번째 매개변수 타입은 int이다. 템플릿 함수가 아니라 평범한 함수의 파라미터처럼 보이고, 실제로 그렇게 쓰인다.

그러나 한 가지 아주 큰 차이가 존재한다! 템플릿 파라미터의 값은 컴파일 될 때 구체화 되기 때문에 실행이 시작되는 런타임ㅁ까지는 int라는 것이 절대 전해지지 않는다.

main 함수에서는 두 가지 버전의 fixed_multiply가 호출되는데, 2를 곱하는 버전과 3을 곱하는 버전이다.

C++은 stream을 이용해서 스크린에 표시되는 미디어를 보여준다. stream은 프로그램으로부터, 또는 프로그램에 글자를 넣고 뺄 수 있게 해주는 장치이다.

스트림은 문자들의 목적지이자 source라는 것을 알고 있으면 된다.

스탠다드 라이브러리는 프로그램이 실행되는 환경에서 필요한 것으로 생각되는 소스들을 가지고 있다. 그 예로는 cin(input), cout(output), cerr(error), clod(logging output)이 있다.

Standard output (cout)

대부분의 프로그래밍 환경에서 standard output은 화면에 표시되는 디폴트이다. C++ 스트림에서는 cout을 standard output으로 이용한다.

cout은 << 오퍼레이터를 끼워넣어서 사용한다. << 오퍼레이터는 그 뒤에 오는 데이터를 앞의 스트림에 삽입한다. 아래 코드에서 cout은 Output sentence 다음에 x의 값을 스트림에 삽입한다.

cout << "Output sentence \n";
cout << x;
//결과: 문자열 "Output sentence \n"와 x의 값을 출력한다.

Standard input (cin)

대부분의 프로그래밍 환경에서 standard input은 키보드가 기본이다. 그리고 C++ 스트림은 standard input에 cin으로 접근하도록 정의해두었다.

cin은 추출 오퍼레이터인 >>과 함께 쓰인다. 입력 추출 오퍼레이터 >>은 어떻게 입력에서 읽어온 값을 해석해서(타입) 전달할지 결정한다. (string인지, int인지, 등등...)

int age;
cin >> age;

위 코드는 정수 변수 age를 선언하고 사용자로부터 cin을 이용해 입력을 받아 age 변수에 저장한다. cin으로 입력을 받을 때, cin은 사용자가 엔터 키를 누르면 입력이 끝난 신호로 받아들인다. 한 번 입력 신호가 전달되면, 프로그램은 어떠한 입력이 들어올 때까지 기다리게 된다.

만약 기대하고 있던 입력 변수의 타입과 실제 입력이 다른 경우 입력이 실패하게 된다.

입력을 할 때 여러개의 값을 입력받을 수도 있다.

cin >> a >> b;

와

cin >> a;
cin >> b;

는 같은 내용이다. 변수 a의 입력이 완료된 후, 사용자가 변수 b의 값을 차례로 입력하게 되는 프로그램이다. 이 때 두 값을 구분하는 데에는 모든 종류의 공백문자(개행문자, 스페이스, 탭)가 사용된다.

String Stream

표준 헤더

<sstream>

은 stringstream이라는 타입을 정의해서 string이 스트림으로 다루어질 수 있도록 한다. 그리고 스트링 입출력을 cin과 cout에서 다루는 것과 같은 방식으로 할 수 있도록 해준다.

이 기능은 string이 숫자 값으로, 또는 그 반대로 변환되는 것에 있어서 편의를 제공한다.

string mystr ("1204");
int myint;
stringstream(mystr) >> myint;

이 코드에서 1204로 선언된 문자열이 세 번째 줄에서 myint라는 변수에 문자열에서 추출된 값이 1204라는 숫자로 바뀌어서 저장되게 된다.

int main (){
    string mystr;
    float price =0;
    int quantity =0;

    cout << "Enter price : ";
    getline(cin, mystr);
    cout << "Enter quantity: ";
    getline (cin,mystr);
    stringstream(mystr) >> quantity;
    cout << "Total price: " << price*quantity << ' ';
    return 0;

}

위 코드에서는 표준 입력에 들어온 스트링을 숫자로 변환해서 받고 있다.

cin and strings

입력을 받는 오퍼레이터는

string mystr
cin >> mystr

으로 문자열을 입력받을 수 있다.

그러나 cin을 사용하면 언제나 공백문자 (space, tabs, newline)가 나오면 입력을 종료하고 입력된 것을 추출해간다. 그래서 띄어쓰기가 포함된 절이나 긴 문장을 가져갈 수가 없다.

cin에서 완전히 문장 하나를 통으로 가져오고 싶으면 getline이라는 함수를 쓰면 된다.

#include <iostream>
#include string
using namespace std;

int main(){
    string mystr;
    cout << "what's your name?";
    getline(cin, mystr); //입력을 받아서 mystr에 저장.
    cout << "Hello" << mystr << ", nice to meet you.";
    return 0;

}

보통 유저들은 프로그램이 자신의 인풋을 엔터를 누르기 전까지는 받고 있을 것이라고 기대한다. 이러한 기대를 getline을 이용해서 콘솔 프로그램에 적용시킬 수 있다.

따라서 웬만하면 유저의 입력값을 받을 때는 cin 보다는 getline을 활용하는 게 바람직하다고 볼 수 있다.

함수는 각각의 기능을 수행하기 위한 부분들로 코드를 나누어 구조화 하게 해준다. C++에서, 함수는 이름을 가지고 있는 하나의 코드 그룹이다. 그리고 함수는 프로그램의 특정 부분에서 실행될 수 있다. 가장 흔한 구조는 아래와 같다.

type name ( parameter1, parameter2, ...) { statements }

• type: 함수에서 리턴되는 값의 타입을 보여준다.
• name: 함수의 이름이다.
• parameters(필요한 경우): 함수를 호출하면서 호출 위치에서 함수로 값을 넘겨주기 위한 목적으로 사용된다. 각각의 파라미터는 식별자(타입)과 함께 따라온다. 각가의 파라미터는 ,(콤마)로 구분되며, 보통의 변수 선언과 비슷하게 생겼다. 그리고 파라미터들은 함수 안에서 거의 그 함수의 로컬변수인 것 처럼 사용된다.
• statement: 함수의 몸통 부분으로, 함수가 실제 하는 일을 나타낸다.

int addition (int a, int b)
{
  int r;
  r=a+b;
  return r;
}

int main ()
{
  int z;
  z = addition (5,3);
  cout << "The result is " << z;
 }

이 프로그램은 두 가지 함수로 이루어져있다. C++에서는 함수가 몇 개 있든 main부터 실행하기 시작한다. main 함수는 자동으로 호출되는 유일한 함수이고, 다른 함수들은 main 안에서 호출되어야 실행될 수 있다.

위 메인함수는 z를 5와 3을 파라미터로 받은 리턴값 r을 변수 z에 저장한다.

함수의 리턴값은 함수가 호출 된 위치로 그 값과 프로그램의 실행 흐름을 넘겨준다. 리턴값은 함수의 앞에 쓰여있는 리턴 타입과 일치해야 한다.

메인 함수의 리턴값

메인함수는 int main ()으로, 리턴값이 정수로 정해져있지만 사실 보통은 retun statement가 없어도 return 0;을 만난다고 컴파일러가 생각하고 함수를 끝낸다. 메인에서 0이 반환되면 함수는 프로그램이 성공적으로 종료된 것으로 해석한다.

다른 함수는 비록 리턴값이 전혀 사용되지 않는다 해도 무조건 적절한 리턴값을 가지고 있어야 한다.

파라미터 (매개변수)

함수의 파라미터는 무조건 '값'으로 전달된다. 즉, 함수를 호출할 때 함수에 전달되는 것은 호출 시점의 인수의 '값'이며, 함수에 들어갈 때 매개변수로 표시된 변수에 복사된 '값'이다. 원본이 아니다.

int addition (int a, int b)
{
  int r;
  r=a+b;
  return r;
}

int main ()
{
  int x = 5;
  int y = 3;
  int z;
  z = addition (x, y);
  cout << "The result is " << z;
  cout << x << ' ' << y;
 }

이 함수의 경우 addition 함수에 들어가는 것은 x와 y가 가지고 있던 값의 복사본이다. 이 값은 (5와 3) 함수의 정의 부분에서 매개변수를 초기화하는 데 사용된다. (a에게 x, b에게 y를 전달) 즉, 변수 x와 y 그 자체는 함수에 전달되지 않고, 함수 호출 순간 x와 y가 가진 값의 복사본만 전달된다.

원본 참조 방법

만약 원본에도 영향을 주고 싶다면 어떻게 해야할까? 매개변수를 가져올 때 참조로 선언하면 된다. C++에서는 매개변수 타입 뒤에 & 기호를 붙여서 참조 선언을 할 수 있다.

참조선언을 하게 되면 매개변수를 넘겨줄 때 복사본이 아니라 변수 그 자체를 넘겨주는 것이다. 원본과 매개변수는 열결되며, 함수 안의 로컬 변화도 실제 원본에 영향을 주게 된다.

이렇게 되면 a와 b는 x와 y를 부르는 새로운 별명이라고 생각하면 된다.

int addition (int &a, int &b)
{
  int r;
  a = 10;
  b = 8;
  r=a+b;
  return r;
}

int main ()
{
  int x = 5;
  int y = 3;
  int z;
  z = addition (x, y);
  cout << "The result is " << z;
  cout << x << ' ' << y;
 }

따라서 addition 함수는 매개변수를 참조로 선언해 변수가 참조로 전달되었기 때문에 원본 x, y에는 영향을 주지 않지만 함수 호출 시 초기화 한 해당 변수의 값에 반영된다. 출력값은 18, 10, 8이다.

효율적으로 참조 사용하기와 const 참조

값으로 매개변수를 취하는 함수에서는 사본이 만들어져 전달된다. 이 떄 매개변수가 정수가 아니라 복사하는 데 비용이 많이 드는 문자열이라면 어떻게 될까?

string concatenate (string a, string b)
{
  return a+b;
}

이 함수에서는 문자열 a, b를 모두 복사해야 하는데 문자열의 길이가 얼마인지 확언할 수 없고, 그렇기 때문에 대량의 데이터를 복사하면서 오버헤드가 발생할 가능성이 있다.

string concatenate (string& a, string& b)
{
  return a+b;
}

이와 같이 참조에 의한 인수로 변경하면 사본이 필요하지 않아서 복사할 필요가 없다. 저 문자열을 가리키는 포인터만 전송하면 되기 때문에 비용도 많이 들지 않는다.

그런데 보통 참조로 변수를 전달하는 이유는 원본 변수를 수정할 목적이 있기 때문이다. 그렇기 때문에 참조 매개변수로 보낸 문자열이 함수에 의해 수정되지 않도록 보장해야 한다.

string concatenate (const string& a, const string& b)
{
  return a+b;
}

이렇게 하면 전달된 매개변수를 이 함수에서 상수로 지정하여 a와 b를 모두 수정할 수 없게 된다. 그러나 접근은 a와 b에 모두 참조로 하기 때문에 효율성은 좋아진다. 실제로 복사본을 만들 필요 없이 참조만 하면서 원본이 수정되지 않게 할 수 있는 것이다.

const참조는 이렇게 큰 데이터를 다룰 때는 효율적이지만 정수같이 간단한 것을 다룰 땐 오히려 비효율적일 수도 있기 때문에 잘 생각하고 사용해야 한다.

Inline functions

함수를 호출하는 것은 보통 특정한 오버헤드를 필요로 한다. 그래서 매우 짧거나 간단한 함수들은 함수를 따로 선언하고 호출하는 것 보다 그냥 필요한 위치에 그 코드를 삽입하는 게 나을 수도 있다.

inline string concatenate (const string& a, const string& b)
{
  return a+b;
}

함수 선언 전에 'inline'이라는 specifier를 붙여서 컴파일러가 호출해서 사용하는 일반 함수보다 in-place 확장을 하는 함수를 사용하고 싶어한다는 걸 알 수 있게 해준다. 이것은 함수 자체의 행동을 바꾼다기보다는 컴파일러에게 함수가 호출되는 각 지점에 함수가 삽입되어야 한다는 점을 알려주는 것이다.

즉, 함수 호출로 함수 위치를 알아내서 함수로 갔다가 다시 돌아오는 번거로운 과정 없이 함수 호출이 함수 자체의 내용 복사본으로 대체되어 오버헤드가 제거된다.

인라인 함수를 알고 있으면 좋지만 *최신 컴파일러는 함수를 적절하게 인라인 하기 때문에 inline 키워드를 꼭 사용하지는 않아도 된다고 한다. *

Default values in parameters

C++에서 함수는 상황에 따라 적합한 파라미터를 가질 수 있다. 여러개의 파라미터, 즉 매개변수가 필요한 함수의 경우 필요한 파라미터 n개가 있을 때, n개 미만을 가지고도 작동이 가능하다는 뜻이다.

이러한 경우, 함수는 파라미터에 대한 기본 값을 가지고 있어서 파라미터 값이 호출 시에 넘어오지 않은 경우 그 값을 가지고 실행할 수 있다.

#include <iostream>
using namespace std;

int divide (int a, int b=2)
{
  int r;
  r=a/b;
  return (r);
}

int main ()
{
  cout << divide (12) << '\n';
  cout << divide (20,4) << '\n';
  return 0;
}

위의 경우 6과 5가 출력된다.

divide (12)

는 함수 divide에 12만을 파라미터로 넘겨주기 때문에, 이 경우 divide의 파라미터 b의 기본값인 2가 적용되어 6이 출력되게 된다.

divide (20,4)

그러나 두 번째 호출에서 20과 4를 넘겨주어 divide에 필요한 두 가지 파라미터를 모두 전달했을 때는, 20과 4를 활용하여 결과값은 5가 된다.

함수 선언하기와 디폴트 매개변수 (Declaring functions)

C++에서, 특정 표현들은 선언하기 전에는 사용할 수 없다. 예를들어 정수 변수 x를 선언하기도 전에 x를 사용할 수는 없다. 함수도 마찬가지이다.

함수가 선언되기 전에는 사용할 수 없다. 즉, 함수는 그것을 호출할 수 있는 함수보다 먼저 (코드 줄 상으로) 선언되어야 한다는 것이다. 만약 main함수가 그 안에서 호출되는 함수보다 더 위에 있는 경우, 함수가 선언되기도 전에 호출하는 것이므로 함수를 찾을 수 없다.

그러나 함수의 프로토타입은 함수를 완벽하게 정의하기 전에도 선언될 수 있다. 함수의 파라미터와 이름 등 syntax는 그대로 쓰되, 몸통 블록 대신 ;를 남기는 것이다.

int protofunction (int first, int second);
int protofunction (int, int);

위와 같이 타입만 파라미터 칸에 남겨두어도 되지만, 이름을 포함하는 것이 함수의 가독성에는 더 도움이 된다.

#include <iostream>
using namespace std;

void odd (int x);
void even (int x);

int main()
{
  int i;
  do {
    cout << "Please, enter number (0 to exit): ";
    cin >> i;
    odd (i);
  } while (i!=0);
  return 0;
}

void odd (int x)
{
  if ((x%2)!=0) cout << "It is odd.\n";
  else even (x);
}

void even (int x)
{
  if ((x%2)==0) cout << "It is even.\n";
  else odd (x);
}

이 예시에서 맨 윗줄의 포로토타입 함수는 호출에 필요한 부분을 이미 갖추고 있다. 파라미터의 타입, 이름, 리턴타입까지 모두 있다. 프로토타입 함수가 제 자리에 있으면 그 함수가 완벽하게 정의되기 전에도 호출될 수 있다. 위처럼 main 이후에 함수가 몸통까지 완전히 정의되어도 괜찮다는 뜻이다.

<조건>

• 매개변수의 개수가 같을 것
• 매개변수의 자료형이 같을 것
• 반환 형태가 같을 것

재귀함수 - Recursivity

재귀함수는 함수가 스스로 호출되어야 하는 함수이다. 대표적으로 팩토리얼 계산이 있다. 함수가 리턴 되는 과정에서 자기자신을 호출하기 때문에 함수의 처음으로 돌아가서 계산한다.

함수를 실행하는 과정에서 괄호 안에서 계속 함수를 펼치면서 실행하고, 마지막에서 더이상 재귀 값으로 반환하지 않으면 호출된 위치로 돌아가면서 값을 완성한다.

// factorial calculator
#include <iostream>
using namespace std;

long factorial (long a)
{
  if (a > 1)
   return (a * factorial (a-1));
  else
   return 1;
}

int main ()
{
  long number = 9;
  cout << number << "! = " << factorial (number);
  return 0;
}

재귀함수는 스택 오버플로우가 발생되지 않도록 조건을 잘 거는 것이 중요하다.

그러나 프로그램이 꼭 선형의 한 순서로만 이루어져있는 것은 아니다. 프로세스 중에, 프로그램은 일부 코드의 부분을 반복하거나 분기되거나 특정 결정을 내려야 할 수도 있다. 그러기 위해 C++은 프로그램에 맞는 상황에서 flow를 통제하기 위한 선언문들을 가지고 있다.

if and else

if는 한 블록이나 선언문을 시행하기 위한 조건 통제를 위해서 사용된다.

if (condition) statement{
    //code block;
}

if 뒤에 else가 따라오면 ()안에 있는 조건이 맞을 경우 if 블록 안의 코드를, 아니면 else 블록 안의 코드를 실행한다. 만약 2개보다 많은 케이스를 if로 나타내고 싶으면 if, else if, else를 사용해주면 된다.

반복문 (loops)

while()

while문은 () 안의 조건이 충족되는 한 루프를 계속한다.

int main (){
    int n = 10;
    while (n>0){
        cout << n << ", ";
        --n;
    }
   cout << "end";
}

위의 조건은 n이 while문 안에서 0이 될 때까지 루프를 반복하며 하나씩 줄어드는 숫자를 출력한다. while문에서 가장 주의해야 할 점은 while문이 언젠가는 끝나야 한다는 것이다! (무한루프 절대 x!) 즉, 언젠가는 () 안의 조건문이 거짓이 되어 while밖으로 나와 정상적인 프로그래밍 종료로 이어질 수 있어야 한다는 것이다.

do-while

나는 지금까지 코딩하면서 do while은 안 써봤는데... do while은 일단 이 선언문을 만나면 조건이 충족 됐든 안 됐든 블록 안의 코드를 무조건 한 번은 하고 (do) 간다는 것이 특징이다.

int main ()
{
  string str;
  do {
    cout << "Enter text: ";
    getline (cin,str);
    cout << "You entered: " << str << '\n';
  } while (str != "goodbye");
}

이 코드를 보면 goodbye를 입력하면 종료가 되는 코드인데, 가장 빠르게 루프를 종료하려고 한다고 해도 enter 과정을 한 번은 거쳐야 하게 되어있다. do-while 루프의 조건은 do 실행 후 검사한다.

for

for 루프는 수 번의 반복이 필요할 때 사용한다.

for (initialization; condition; increase) statement;

while처럼 조건이 참일 때 statement를 반복한다. 그러나 이에 더해서, for 루프는 statement로 진입하기 전 확인할 수 있는 '초기화'와 '증가문'을 포함해야 한다.

1. 초기화를 통해서 카운터 변수를 선언하고, 초기 값을 지정한다.
2. 만약 지정된 조건이 참이라면 statement가 실행된다.그렇지 않으면 루프는 스킵하고 넘어간다.
3. statement가 실행된 후 increase(증가문)이 실행되고, 조건을 다시 확인하면서 반복한다.

3가지 조건을 모두 주지 않아도 실행될 수 있다. 그러나 세미콜론은 모두 붙어있어야 한다. 만약 for문이 나오기 전에 사용할 변수를 초기화했으면 첫 번째 칸을 비워두는 등이 가능하다. 그러나 조건이 없는 루프는 무한 루프에 빠지기 때문에 주의해야 한다.

Range-based for loop

for문은 다른 형태를 가질 수 있다. 특정 범위에 의해 사용되는 경우이다.

for ( declaration : range ) statement;

이 루프는 범위 안에서 반복문을 실행한다. 범위란, 함수가 실행되고 끝나기 위한 요소이다(배열, 타입 등).

int main ()
{
  string str {"Hello!"};
  for (char c : str)
  {
    cout << "[" << c << "]";
  }
  cout << '\n';
}

이 코드에서는 "Hello!"라는 문자열 안에 들어있는 문자 하나하나를 가지고 for문을 반복한다.

jump문

break

break는 반복문 실행 중 만나게 되면 아직 종료를 위한 조건이 충족되지 않았더라도 해당 반복문을 벗어나게 되는 구문이다.

int main ()
{
  for (int n=10; n>0; n--)
  {
    cout << n << ", ";
    if (n==3)
    {
      cout << "countdown aborted!";
      break;
    }
  }
}

이 경우 원래는 n이 10에서 시작해서 하나씩 주는 반복문인데, n이 3이 되면 if문 안의 break에 의해서 루프를 벗어나게 된다.

continue

continue는 프로그램이 남은 루프를 현재 반복 회차에서 건너뛰도록 한다. 마치 이미 반복이 다 끝나고 넘어간 것 처럼 continue를 만나면 밑의 statement를 다 건너 뛰고 다음 반복으로 넘어간다.

goto

goto는 프로그램의 특정 포인트로 점프할 수 있게 해준다. nesting level(여러개 겹쳐진 괄호들)을 무시하고 점프할 수 있다. 그러나 보통 저수준 프로그램에서 사용된다고 한다.

int main ()
{
  int n=10;
mylabel:
  cout << n << ", ";
  n--;
  if (n>0) goto mylabel;
  cout << "liftoff!\n";
}

이 코드에서는 n이 아직 0보다 크면 mylabel 부분으로 넘어가게 해서 반복문을 만들었다.

선택문 (switch)

switch는 조금 특별하다. 여러가지의 특정하게 정해진 가능성이 있을 때 그 값을 체크하고자 할 때 사용된다. if-else를 여러개 붙여놓은 것과 비슷하다. 위에서부터 내려오며 실행되며, 중간에 break를 만나지 않는 한 계속 밑으로 가면서 실행된다.

switch (x) {
  case 1:
  case 2:
  case 3:
    cout << "x is 1, 2 or 3";
    break;
  default:
    cout << "x is not 1, 2 nor 3";
  }

레이블을 사용해서 각각의 케이스를 구분하며, break문이 없으면 break문을 만나거나 블록이 끝날 때까지 계속 작업한다. 만약 일치하는 레이블이 없으면 default 뒤의 명령문을 실행한다.

모든 case 레이블은 고유한 값을 가져야 한다.

예를 들어, 페어 리스트를 만들기 위해 이와 같은 타입이 필요하다고 생각해보자.(정확히 저 코드가 무슨 뜻인지는 몰라도 됨.)

std::vector<std::pair<std::string, int>> pairlist

이렇게 긴 코드를 쓰기 힘드니까 하나의 새로운 타입으로 닉네임을 붙여서 만들어버리는 것이다.

typedef std::vector<std::pair<std::string, int>> pairlist_t

int main(){
    pairlist_t pairlist
}

이렇게 하면 위에 있던 긴 코드를 pairlist_t 라는 타입으로 정의하고 사용할 수 있다. 주로 typedef를 사용할 때는 이름 뒤에 type이라는 의미로 _t를 붙인다.

이렇게 이미 존재하는 타입에 대해 새로운 식별자를 주고 효율적으로 사용할 수 있다는 점이 typedef의 가장 큰 장점이다.

typedef int number_t

int main () {
    number_t num;
}

위 코드에서는 int 타입에 number_t라는 이름을 주어서 int 대신 number_t도 사용할 수 있도록 하였다.

typedef는 using 키워드를 통해서 대체할 수도 있다.

using int number_t

int main () {
    number_t num;
}

namespace는 큰 프로젝트에서 이름 충돌을 방지해주는 기능을 제공한다. 코드 안의 구성 요소들은 각각 다른 자신만의 이름을 가지고 있어야 한다.

int main(void){
    int x =0;
    int x =1;
}

만약 이와 같이 코드를 작성하면 컴파일 에러가 발생할 것이다. 그러나 namespace를 사용하면 같은 이름을 가진 변수가 서로 다른 값을 가지고 있을 수 있도록 해준다.

namespace first{
    int x = 1;
}

namespace second{
    int x = 2;
}

int main (){
    int x = 0;
    cout<< x;
}

위의 경우 main에서 x를 출력했기 때문에 0이 출력된다.

namespace first{
    int x = 1;
}

namespace second{
    int x = 2;
}

int main (){
    int x = 0;
    cout<< first::x;
}

그러나 x 앞에 first::를 붙여주면 namespace first에 있던 x가 출력되어 1이 나온다 '::'는 first namespace의 x를 참고하겠다는 의미이다.

보통 코테를 풀 때 시작 전에

using namespace std;

를 작성하고 시작하는데, 그 이유는 미리 std를 참조한다고 컴퓨터에게 알려주어서 string, cout 등 앞에 std를 참조한다는 것을 적어주지 않아도 되기 때문이다.

따라서 namespace를 이용하는 이유는 똑같은 이름의 entity가 있어도 서로 다름을 확인하고 구분해주기 위해서이다.

int a = 5; 
int a(5);

두 방법 모두 초기화에 사용된다.

stdio.h 는 cstdio, stdlib.h 는 cstdlib, math.h 는 cmath

이렇게 h 대신 앞에 c를 써줘서 파일을 사용할 수 있다

STL(Standard Template Library)

vector STL은 배열과 비슷한 기능을 수행한다.

C++은 배열 크기를 선언하고 그 안에서 사용해야 하지만, vector의 경우에는 가변배열로 늘였다 줄였다 하면서 사용할 수 있다.

void func1(vector <int> v){
    v[10] = 7;
}
int main (void) {
    vector<int> v(100); //0으로 초기화된 100칸짜리 배열 선언
    func1(v);
    cout << v[10];
}

이 코드의 출력값은 무엇일까?? 답은 0일까 7일까? 답은 7이다.

STL은 변수나 구조체처럼 함수에 보내질 때 복사본을 만들어서 보내기 때문에 swap 함수 같은 것을 만들어서 배열에 접근하더라도 원본에 영향을 주지 않는다.

bool cmp1 (vector<int> v1, vector<int> v2, int idx){
    return v1[idx] > v2[idx];
}

그렇기 때문에 위 함수의 시간 복잡도는 O(1)이 아니라 O(N)이다. 왜냐하면 return 문에서 1번 연산을 하는 건 맞지만, vector를 받아오면서 n개의 칸을 모두 복사해와야 하기 때문에 원소를 복사하는 데 시간이 걸리는 것이 O(N)이다.

표준입출력

C++에서는 scanf와 cin 두 가지 방법으로 입력을 받을 수 있다. 그런데 두 방식 모두 공백 앞 자리까지만 입력을 받는다는 문제점이 있다.

int main (void){
    string s;
    cout << "input : "
    cin >> s;
    cout << "s is" << s;
}

/***결과
input : hi hello //입력이 hi hello
s is hi//hi에서 입력이 더 받아지지 않음
***/

이 문제를 해결할 수 있는 함수가 getline함수이다.

string s;
getline (cin, s);
cout << s;

이렇게 코드를 getline 함수를 이용해서 작성하면 공백이 포함된 문자열을 받을 수 있다. 그러나 타입을 C++ string만 받을 수 있다.

cin, cout을 사용할 때 주의할 점이 있다. cin, cout은 입출력 시간초과를 막기 위해서 두 명령어를 실행시켜야 한다. ios::sync_with_stdio(0)와 cin.tie(0)이다.

프로그램에서는 printf와 cout을 같이 써도 문제가 없도록 C++과 C스트림을 동기화 하고 있다. 그런데 만약 내가 C++스트림만 사용한다면 오히려 동기화 과정이 리소스 낭비일 수 있기 떄문에, 동기화를 끊어서 프로그램 수행 시간에서 이득을 보는 게 좋다. 따라서 이 때 ios ::sync_with_stdio(0)을 사용한다.

대신 동기화를 끊었기 때문에 cout과 printf를 섞어쓰면 순서가 뒤죽박죽이 될 수 있기 때문에 둘을 섞어 쓰면 안 된다.

입출력 버퍼의 혼란 때문이다. 입출력 과정에서 컴퓨터는 한 글자 한 글자 바로 내보내는 것이 아니라 버퍼에 쌓아놨다가 풀어주는 과정을 반복하는데, 입출력이 혼재된 코드에서 순서가 꼬이지 않게 기본적으로 cin 이전에 cout 버퍼를 비우는 것이 기본이다.

오른쪽은 버퍼가 제대로 비워지지 않았을 경우, (출력이 입력보다 늦게 나타남), 왼 쪽은 제 때 버퍼가 비워지면서 우리가 원하는 타이밍에 입출력이 이루어지는 경우.(출처: 바킹독 알고리즘 영상- 0x02강)

그런데 알고리즘을 채점할 때는 콘솔을 보는 게 아니라 출력되는 글자만 확인하기 때문에 입출력 글자 순서가 꼬여도 상관 없다. 따라서 cin 명령 수행 전에 cout 버퍼를 굳이 비워줄 필요가 없기 때문에 '굳이 안 비워도 된다'는 명령을 주는 것이 cin.tie(0)이다.

endl 쓰지마세요

endl은 출력 중간중간 버퍼를 비워주는 친구인데 시간을 잡아먹는 이유가 되므로 알 필요가 없다고 한다! (원래 모르고 있었어서 다행이라고 해야할까...)

Background - JS Object

In JS, object is a variable that can contain many values, and consists of groups of related data of different types.

const fruit = {type:"Apple", colour: "green"};
console.log(fruit.type);

As you see, in object, properties have name-value match. It is able to acess to the object's properties using dot notion.

In React, you can use the similar technique to pass the data from one componet to another using the properties object or simply props.

React Props

Props allow you to pass data from one component to another.

Props is essentially a javascript object. So, it can accept many data types from int, string to arrays, fucntions ...

With props, it is able to work more flexibly.

You can send the value, title, to be passed to App.js. So, when App.js is rendered, it takes the value of the props and puts it as a value of h1 tag.

Data flow of props

When two components communicate with each other, the component sending the data is the parent and the reciving one is child. In the case above, index.js is a parent component and App.js would be a child component.

It's possible for the parent component to send the same data to multiple child components. But, it is impossible for the child components to communicate back to the parent components using props.

Limitation

• It is not able to communicate back to the parent components for child components.
• Pure functions: a fucntion which always returns the same output for the same argument values.

So, when you decalare a function using props, it must never modify its own props.

fucntion Heading (props) {
    props.title = "new value"; //not allowed
        retun (
            <h1>{props.title}</h1>
        );

};