[RN] Props 중괄호 사용 (feat. 구조 분해 할당)

Props에 중괄호 {}를 사용하여 속성 전달

요점만 바로 파악할 수 있도록 필요한 부분의 코드만 가져왔고, 시뮬레이터를 제외한 터미널의 출력 화면으로만 살펴볼 것이다. 터미널을 통해 props가 값으로 들어오는 것인지, 객체로 들어오는 것인지를 확인할 것이다. 

// App.js

const App = () => {
  return (
    <View
      style={{
        flex: 1
      }}>
      <Ages age={20} />
      <Names name="haileyhailey" />
    </View>
    
  );
};

export default App;

 

위의 코드는 메인 함수인 App.js에서 각각의 컴포넌트로 age와 name을 전달한다. 이때 숫자를 전달할 때는 중괄호로 감싸야지 빨간 줄 오류가 안 생긴다. 

// Ages.js

const Ages = ({age}) => {
    console.log(age);
    return (
        <View style={styles.container}>
            <Text style={{ fontSize:50, fontWeight:300 }}>{age}</Text>
        </View>
    );
};

// Names.js

const Names = ({name}) => {
    console.log(name);
    return (
        <View style={styles.container}>
            <Text style={{ fontSize:50, fontWeight:300 }}>{name}</Text>
        </View>
    );
};

 

두 컴포넌트의 구조가 같아서 함께 말하자면, App.js에서 각각의 컴포넌트로부터 props가 중괄호로 감싸져서 전달되었다. 사실 지금에 와서 생각해 보니 중괄호에만 너무 매몰되어서 생각하면 안 되는 것 같다. 여기서 이 두 가지만 알면 수월해진다.

•  Props는 기본적으로 객체(object)로 반환된다.
• 구조 분해 할당(destructuring assignment): 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

나는 자바스크립트가 (정말) 익숙하지 않아서 몇 시간 전 들었던 구조 분해 할당이 여기서 적용되고 있다는 걸 눈치채고 있지 못했다. 알고 나면 별거 아닌 것 같은 느낌은 든다ㅎ 구조 분해 할당은 위의 개념대로 배열이나 객체가 가지고 있는 키에 대한 속성 값을 별도의 새로운 변수에 저장하여 표현하는 것이다. 아래와 같이 예제를 보면 쉽게 이해할 수 있다. 참고로 변수명은 꼭 객체 프로퍼티가 아니어도 된다. 그럴 땐 

좌측에 { 객체 프로퍼티: 목표 변수 } 로 표현한다. 

const user = {
    age: 20,
    name: 'hailey'
};

const { name, age } = user;

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://ko.javascript.info/destructuring-assignment#ref-311

구조 분해 할당

이 구조 분해 할당을 위 코드와 함께 엮어서 보자면, 매개변수에 썼던 ({ name }), ({ age })가 모두 객체 프로퍼티의 값을 담는 변수라는 것을 눈치챌 수 있다. typeof를 통해 자료형을 확인해 보면 아래와 같이, 매칭되어 있던 속성 값이 들어가면서 각각 number와 string이 된 것이라는 결론을 낼 수 있다.

 

({ name/age })로 표현했을 때

 

지금까지는 매개변수 자리(-> 소괄호)에 중괄호로 감싸서 표현한 변수 형태를 보았다면, 원래대로 props가 기본적으로 객체로 반환되는 경우를 살펴볼 것이다. 매개변수 자리에는 특정 프로퍼티 이름보다는 일반적인 'props'를 써 주었다. 전자를 쓰면은 속성을 표현할 때 괜히 헷갈린다.  (ex. age.age, name.name) 

const Ages = (props) => {
    console.log("age props: " + typeof(props));
    console.log(props);
    return (
        <View style={styles.container}>
            <Text style={{fontSize:50, fontWeight:300}}>{props.age}</Text>
        </View>
    );
};

const Names = (props) => {
    console.log("name props: " + typeof(props));
    console.log(props);
    return (
        <View style={styles.container}>
            <Text style={{fontSize:50, fontWeight:300}}>{props.name}</Text>
        </View>
    );
};

 

이 경우에 로그에 찍힌 것을 보면 자료형이 object로 객체임을 확인할 수 있다. 그렇기 때문에 키에 대한 속성에 접근하려면 props.[키]로 써야 한다.  

( props )로 표현했을 때

 

+ 그 외 chatGPT한테 물어본 것들..

1. 소괄호는 필수인지

2. 중괄호는 필수인지

중괄호를 사용하는 이유

중괄호를 사용하는 이유는 객체 디스트럭처링이 객체의 속성을 추출하고 변수에 할당하는 명시적인 문법이기 때문입니다. 함수 매개변수 자리에서도 객체 디스트럭처링을 사용할 때는 중괄호를 사용해야만 해당 객체의 속성을 추출하여 사용할 수 있습니다.

 

https://velog.io/@rkio/React-컴포넌트-파라미터-부분에-를-사용할-때와-사용하지-않을-때의-차이