함수

• 어떤 입력 값을 받아서 결과를 만들어 주는 것
• 엑셀 함수를 생각하면 쉬움
• 프로그래밍에서 함수란 특정 기능을 수행하는 코드
• 엑셀에서는 이미 만들어진 함수를 주로 호출함
• 파이썬(프로그래밍)에서는 필요한 함수를 프로그래머가 직접 개발할 수 있음.

파이썬에서 함수 만들기

• 프로그래밍에서는 함수를 만드는 것을 = 함수를 정의한다 , 라고 표현함.

• 파이썬 함수를 정의할 때 규칙

  • def 키워드를 사용하여 함수를 만들 수 있음.

  • 함수의 이름이 필요(변수 이름과 같은 규칙)

  • 함수의 입력이 있는 경우 입력 값들을 바인딩할 변수를 적어 줌

  • 들여쓰기 후 함수가 호출될 때 수행할 문장을 기술함.

    def 함수이름():
      코드 
    
    def sum(A1, A2, A3): #첫째 값을 A1, 두번째는 A2 등 바인딩할 변수 = 인자값
      코드 #앞에 들여쓰기 하고, 호출될 때 수행할 문장을 기술함. 

함수 정의

• 함수 이름은 별찍기
  • 함수의 기능은 별을 출력
  • 함수 이름은 들여쓰기 된 코드를 바인딩
  • 그러니까 별찍기는 들여쓰기 된 코드들을 바인딩하게됨.

파이썬 변수와 함수의 차이점

• 파이썬 변수는 값에 대한 이름표

  • 어떤 값이 자주 사용될 때 값에 이름표를 붙이는 개념임.
  • 변수는 값을 바인딩 함.

• 파이썬 함수는 어떤 코드에 대한 이름표

  • 어떤 코드가 자주 사용될 때 코드에 이름표를 붙이는 개념.
  • 함수는 코드를 바인딩 함.

파이썬 함수 호출

• 파이썬 함수의 이름은 코드 객체를 바인딩
• 함수 이름이 바인딩하고 있는 코드를 수행하는 것을 함수 호출이라고 부름
• 함수 호출 방법
  • 함수 이름()
  • 소괄호가 함수 호출을 의미함

함수 호출의 이해

• 파이썬 코드는 기본적으로 위에서 아래로 순차적으로 실행 됨
• 파이썬 인터프리터는 def 키워드를 만나면 코드를 메모리에 할당하고 이를 함수 이름이 바인딩

def mysum(a,b):
    ret = a+b
    return ret

• 함수를 호출할 때, 정의에서 2개를 받기로 했으면 두개를 받아줘야 함.
• mysum은 코드 객체를 바인딩하고 있음.
• 하지만 메모리에 위치만 알고 있는 상태기 때문에, 내가 함수를 사용하기 위해 함수를 호출할 때는 인자값을 넣어줘서 불러내야함.

함수 호출의 이해(2)

• 함수 이름에 ‘()’를 붙이면 해당 함수가 호출 됨
  • 함수의 호출이란 함수 이름이 가리키는 코드의 실행을 의미함
  • 인터프리터는 코드를 실행하기 위해 함수로 이동

def mysum(a,b):
    ret = a+b
    return ret

ret1 = mysum(3,4)
#ret1은 7이 되는거겠지? 

함수 호출의 이해(3)

• 함수 호출의 1단계 : 입력 값 바인딩
  • 함수 정의부의 변수(파라미터)는 함수 호출부에 전달한 값(인자/Argument)를 바인딩한다.
  • a = 3, b =4
• 함수 호출의 2단계 : 함수 실행
  • 함수 내에 들여쓰기 된 코드가 수행됨.
  • ret = a + b / 3+4 , 이제 ret는 7을 바인딩하게 됨.
• 함수 호출의 3단계 : 결괏값 리턴
  • 함수 내에서 사용된 변수 소멸 / a,b,ret가 다 없어짐
  • 바인딩 되지 않은 객체(참조되지 않은 값)는 소멸됨.
  • 인터프리터는 함수 호출부로 돌아감.
  • 여기서 ret가 소멸되므로 mysum(3,4)는 7인데 왼쪽에 있던 ret1이 7이라는 값을 바인딩하게 됨.
  • 리턴이 되면서, 3과 4는 아무도 가리키지 않기 때문에 지워지게 되지만 7은 함수 바깥쪽에 있는 ret1이라는 변수가 가리키고 있기 때문에
  • 결과값은 계속 남아있게 되는 것!!
• = 함수를 호출할 때 결과값을 바깥에서 바인딩 해주는 이유!

연습문제

num = 10

def foo()
    num = 20

foo()
print(num)

• 다음 코드를 실행할 때 출력되는 값은?
  • 정답
    1. num은 10을 바인딩하게 됨.
    2. foo라는 함수는 들여쓰기 된 코드를 바인딩 하는 중
    3. foo() 인터프리터가 foo를 수행함. 이 때 num이 20을 가르키게 된다. 명시적으로 리턴하지 않았을 때 return none이 리턴됨. 하지만! 이 num은 함수 foo안에서의 num이다. 인자값이 없으므로 foo()를 실행했을 때, return none이 되면서 함수 내에 사용된 변수 소멸(num 소멸), 참조되지 않은 값도 소멸(20 소멸)
    4. 함수 foo() 호출이 끝나고, 여전히 함수 바깥에서 num은 10을 가리키고 있기에 print(num)은 10이다.

전역 변수와 지역 변수

• 전역 변수
  • 함수 밖에서 정의한 변수
  • 특정 파이썬 파일에 정의된 변수 / 파일 단위로 계속 유지
• 지역 변수
  • 함수 내에서 정의된 변수
  • 함수가 호출되는 그 순간에만 존재함

a = 10 # 전역 변수

def test():
    b = 20 # 지역 변수 / 함수 호출 끝나면 없어짐. 
    print(b)

test()

LEGB 규칙

• LGEB 규칙(rule)
  • 파이썬에서 변수에 값을 바인딩하거나 변수를 참조할 때 LEGB 규칙을 따름.
    

파이썬 기본 데이터 타입

• 파이썬 기본 데이터 타입

  • 각 데이터를 효율적으로 다루기 위해 타입(type)으로 나눔

    데이터 타입	설명
    정수(int)	양의 정수, 음의 정수 (0,1,2,-1,-2 …)
    실수(float)	0.03, 3.14232…
    문자열(float)	- 작은 따옴표나 큰 따옴표로 둘러싸인 문자

  • 문자와 문자열을 구분하지 않음

  • “p”,”python3”,”3”

  • 따옴표로 둘러싸인 것은 다 문자

파이썬 변수(variable)

• 변수란?

  • 파이썬에서 자주 사용하는 값에 대한 이름표

  • 변수(이름)을 통해 값에 접근할 수 있음

  • 아이스크림 = 1500 이면, 아이스크림이라는 변수에 1500이라는 메모리를 할당한 것

  • 그리고 이 때 아이스크림이라는 변수는 1500이라는 값의 위치를 바인딩 하는 것이다.

  • 아이스크림 * 10 = 15000 , 이렇게 더 쉽게 코드 해석이 가능해짐

바인딩의 의미

• 변수는 값을 바인딩 함

  • 값이 메모리에 할당된 주소를 기억함

- 아이스크림 = 1500 이면,

- id(아이스크림) , 140525831715600가 아이스크림의 주소
- 64비트면 0부터 2의 64승-1 까지의 메모리 주소를 가짐. (32비트면 32승)

변수 바인딩

a = 2
a = 4
print(a)

• 파이썬은 위에서 아래로 인터프리터함.

• a는 원래 2의 값의 위치를 바인딩했지만, 4의 위치를 바인딩하게 됨.

  • 이 때 2의 위치는 그럼 어떻게 되느냐? -** GC라는 garbage collector**가 알아서 처리해줌

    • 참조하지 않은 값, 레퍼런스 카운터를 알아서 GC가 처리해준다.
    • 이 말은, 참조하지 않은 값을 직접 올렸다가 해제할 필요가 없다는 뜻.
    • 사용자가 메모리 값을 명시적으로 관리하지 않아도 파이썬에서 알아서 해줌.

자료 구조

• 여러 데이터를 효과적으로 다룰 수 있는 것
• 파이썬에서는 기본 타입으로 제공 됨
• 다른 객체들의 컬렉션

• 딕셔너리 = 데이터가 여러개 일때 여러 정보를 저장할 수 있는 데이터,
  • [100,200,300]일 때, 가격말고 이 가격에 해당하는 과일에 대한 정보는?
  • 이럴 때 딕셔너리를 사용한다.
  • 가격의 값뿐만 아니라 레이블의 정보 또한 같이 저장하는 것.
  • 사과는 2000원, 배는 3000원.
  • 파이썬은 딕셔너리 안 만들어도 기본 자료구조 타입으로 저장하고 있어서 편리함. (C타입은 직접 만들어야 됨)
  • 레이블 KEY 값이 유니크해야 해당하는 값을 저장할 수 있겠지? (사과가 2개면 안됨)
  • 딕셔너리는 순서 없음.

인덱싱

아이스크림 = ["구구콘","메로나","비비빅"]

print(아이스크림[0])

#구구콘

인덱싱은 값을 가져오는 것

• 순서가 있다면 ! (리스트나 튜플의 경우), 정수값으로 인덱싱 할 수 있다.

슬라이싱

• 어떤 범위를 가져오는 것

아이스크림 = ["구구콘","메로나","비비빅"]

print(아이스크림[0:2])

# "구구콘" "메로나"

• 학교 청소시, 1번부터 5번까지 테니스장 청소 해주세요 ~

• 리스트나 튜플은 순서가 있으니 특정 범위에 있는 값들을 가져올 수 있음.

• 주의점은 슬라이싱은 머리 위에 붙은 값이 아니라 사이사이 값을 의미함.

• 그래서 0:2 , 0부터 2면 비비빅 까지 아니라 0구구콘1메로나2비비빅3 이므로,

• “구구콘”, “메로나”가 출력됨.

반복문

• 반복문은 데이터가 여러개 일 때, 이 데이터에 대한 처리를 해주는 것이다.
• 반복문은 for와 while로 생성이 가능하고,
  • 보통의 경우 for문 사용
  • 무한루프의 경우 while문을 사용함.

# "포 아이 인" 리스트 / 리스트 안에 있는 값 i에 대해서 라는 뜻!
for i in list:
    수행할 문장 1
    수행할 문장 2
    ...

카트 = ["과자","음료수","과일"]

fot i in 카트:
    print(i)

#카트 안에 있는 각각의 아이에 대해서, 아이를 프린트 해라. 

• 일반적으로 파이썬은 위에서 아래로 수행되지만, 반복문을 만나면
• 위에서 아래로 아래에서 위로, 계속 반복하게된다.

카트 = ["과자","음료수","과일"]

fot i in 카트:
    print(i)

#sudo 코드

for i in 카트:
 print(i)

# i는 카트 안의 변수, 카트 안의 i에 대해서 프린트 해라 => "과자"
# 반복문 이므로 다시 위로 돌아감. i는 음료수 바인딩. => "음료수"
# 다시 돌아감 => "과일"
# 다시 올라갔는데, i가 바인딩할 값이 더이상 없으면 for문이 종료됨. 
# "과자" "음료수" "과일"

while 문

• while 문은 while다음에 조건이 붙는다. 이것이 중요함

num = 0

while num<5:
    print(num)
     num = num + 1

• 먼저 조건에 사용될 값 초기화, num은 0

  • num은 5보다 작으니 print 되고, num = num+1 이므로 1이된다.

  • 4까지 반복적으로 수행됨.

  • 중요한 것은 이 때 num = num + 1이런 값을 넣어주지 않으면 무한으로 식이 반복됨.

  • 출력은 0,1,2,3,4가 됨.

  • num = num + 1은 num += 1과 같은 식임.

동영상 강의를 토대로 정리했습니다. 궁금한 점은 댓글 남겨주세요!

PAGE ROUTING

*라우팅은 무엇인가? *

• 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정
  • 카카오톡으로 친구한테 야 뭐해?
  • 친구에게 데이터를 전송하는 과정
  • 데이터는 직통으로 전송되지 않는다. (라인이 완전 일자가 아니다.)
  • 데이터들도 지하철을 타듯이 네트워크 장치들을 거쳐서 이동
  • 네트웍 장치 = 지하철 역
  • ROUTER = 데이터의 경로를 실시간으로 지정해주는 역할을 해주는 무언가
  • 그렇다면 ROUTING 은?
  • 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말

페이지 라우팅이란 무엇인가?

• 인터넷을 통해서 웹사이트에 접속한다는 것은 브라우저를 통해 웹서버에게 경로의 요청을 날리고 웹 문서를 받아보는 과정이다.
• 단순히 어떤 요청에 따라 어떤 페이지를 반환해줄지 결정하는 과정.
• 경로에 알맞는 페이지를 선별해서 웹 서버가 돌려준다, 이 요청에 명시되어 있는 과정에 따라서 알맞은 페이지를 선택하고, 그 페이지를 반환해서 사용자가 페이지에 접속하는 과정 자체 = 페이지 라우팅
• 보통 웹 사이트들은 MPA (multi page application) 사용, 새로고침 하듯이 깜박이면서 다른 페이지를 보여줌

그런데 리액트는

• SPA (single page application) 마이 페이지든 요청 페이지든 똑같은 index.html을 반환하는 것임
• 이럴때 routing을 잘 활용해야한다!!
• 페이지 이동이 아주 빠르고 쾌적하다 새로고침처럼 안되니까..
• 페이지 이동이 리액트에서는 페이지 업데이트가 되는 것임 → 시간 단축
• 페이지 이동할때마다 서버가 기다리는 시간 자체가 없음.
• SPA를 사용한 페이지 이동은 데이터가 없다면 로딩을 잠깐 띄어놓으면 되니까.. 그냥 전체적으로 페이지 이동이 엄청 빠르다.
• 이런 렌더링을 클라이언트들이 직접 렌더링 한다고 해서 CSR (client side rendering) 이라고 부른다!

라우터 사용법

1. 라우터 설치하기

   npm install react-router-dom
   

2. 라우터 임포트 하기

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

사용할 리액트 라우터를 임포트 하기 

> BrowserRouter as Router: 브라우저에서의 라우팅을 위한 컴포넌트.
Route: 어떤 경로에 어떤 컴포넌트를 렌더링할지 정의한다.
Switch: 여러 Route 중 경로가 일치하는 첫 번째 Route만을 렌더링하게 도와줌.
Link: 페이지를 새로고침하지 않고 경로를 변경.


3. 페이지를 임포트!

import Home from "./Home"

function Home() { return

홈 페이지

function About() { return

소개 페이지

function Users() { return

사용자 페이지

함수로 되어있지만 홈, 소개, 사용자가 각각 페이지 컴포라고 했을때 메인(ex.App.jsx)페이지에 임포트 해줌.

4. 라우트로 설정해주기 

function App() { return (

    {/* 라우트 설정 */}
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/users" component={Users} />
    </Switch>
  </div>
</Router>

리액트 라우터 에서는 페이지 관련한 여러가지 기능들이 있는데
사용법이 아주 간단하므로 한번 익혀두면 안 까먹고 쓸 수 있다.
다만 아예 처음 사용할때는 컴포넌트 분리하는 구조가 좀 헷갈릴 수 있다. 
근데 이것도 개발하는 사람마다의 성향에 따라 조금 차이가 있는 듯 하여, 어떤 교과서적인 방법이 있는 건 아닌듯 하다.. 
이래서 더 헷갈리나? ㅜㅜ



![](https://velog.velcdn.com/images/jin_zero/post/da66f5ca-eb10-4c3e-8f9f-3b244a7676eb/image.jpeg)

const Counter = (props) => {
    ....

const [count, setCount] = useState(props.initialValue);

// import './App.css';
import MyHeader from "./MyHeader";
import Counter from "./Counter";

function App() {


  const counterProps = {
    a : 1,
    b : 2,
    c : 3,
    d : 4,
    e : 5,
    initialValue : 5
  }

  return (
    <div >
      <MyHeader />
     <Counter {...counterProps} />
    </div>
  );
}

export default App;
//부모 컴포넌트에서 자식 컴포넌트에게 이름을 붙여서 값을 전달하는 것 = Props

import React, {useState} from "react";

const Counter = ({initialValue}) => {


  //0에서 출발
  //1씩 증감하는
  //count 상태(state)

  const [count, setCount] = useState(initialValue);

function Page() {
  return <Button />;
}

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>클릭해봐!</button>;
}

Button.defaultProps = {
  color: 'blue'
};