2025-02 TIL

야근 지옥에서 내가 돌아왔다!!!
다시 야근을 하더라도 오늘의 나는 또 새 게시글을 쓴다 🍎 (그냥 월 표기를 없앨까봐... 연 표기로 할까...)

가물가물한 리액트의 기억을 더듬어서 다시 시작 ㅠㅠ

2025-02-12

컴포넌트 대문자

리액트에서 컴포넌트 명칭은 꼭! 대문자로 써야 한다. 앞에서도 언급했지만... 소문자로 쓰면 HTML 태그로 인식해서 렌더링이 안된다.

    function Hello() {
      return (
          <div>
            <h1>Hello</h1>
          </div>
      );
    }
    function world() {
      return (
          <div>
            <h1>World</h1>
          </div>
      );
    }
    function App() {
      return (
          <div>
            <Hello /> // 컴포넌트 호출
            <world /> // 컴포넌트 호출 안 됨
          </div>
      );
    }

소문자 world 컴포넌트는 안 나온다. 뭔가 이상하다 싶으면 대소문자 체크하기~!

2025-02-18

함수 매개변수를 전달하는 방식 : Python vs. JS vs. JSX

1. Python

1. 키워드 전달

def my_func(a, b): ...
my_func(a=1, b=2)
my_func(b=2, a=1) # 순서와 무관
# my_func(c=1, b=2) # 정의되지 않은 키워드를 전달하면 에러

2. 위치 전달

def my_func(a, b): ...
my_func(1, 2) # 순서대로 전달

3. 객체 전달

def my_func(a, b): ...
my_func({"a" : 1, "b" : 2})

4. 동적으로 객체 전달

def my_func(**kwargs): ...
my_func({"a" : 1, "b" : 2})

2. JavaScript

Python과 다르게 키워드 전달 방식은 없다.

1. 위치 전달

function myFunction(a, b) {
    console.log(a);
    console.log(b);
}
MyComp(1, 2);
// 출력 결과 :
// 1
// 2

2. 강제로 객체를 전달하면? → 객체를 통째로 첫 번째 위치 인자에 할당해버린다!

function myFunction(a, b) {
    console.log(a);
    console.log(b);
}
myFunction({ a: 1, b: 2 });  
// 출력 결과 :
// {a:1, b:2}
// undefined
// a=1, b=2로 할당되는 게 아니라 a에 {a:1, b:2} 객체가 통째로 할당되고 b에는 아무것도 할달되지 않는다. 

3. 객체로 전달하는 방법 "객체 구조 분해 할당 destructuring"

function myFunction({a, b}) { // 위와 다르게 { }로 객체를 명시
    console.log(a);
    console.log(b);
}
myFunction({ a: 1, b: 2 });
// 출력 결과 :
// 1
// 2
// 이렇게 하면 a, b 각각 할당이 가능하다!

3. JSX

1. JSX도 분해 할당이 가능하다.

function MyComponent({ a, b }) {
    return <div>{a} {b}</div>;
}

// 개별 속성으로 전달 가능
<MyComponent a={1} b={2} />

// 객체로 한 번에 전달 가능
const props = { a: 1, b: 2 };
<MyComponent {...props} /> 

2. JSX의 props는 Python **kwargs와 유사하게 동작한다. 항상 객체를 받아서 자동으로 할당해준다.

function MyComponent(props) {
    return <div>{props.a} {props.b}</div>;
}

// 전달 방법 : 1번 예시의 두 가지 모두 가능