[스나이퍼팩토리] 한컴 AI아카데미 4기 8주차 대,중,소 괄호

어디까지 알고 있나? (0 ),{0 }

다들 아시는 부분 이겠지만,

ReactNative 를 공부하면서 어느 때는 ( ) 소가로 를 쓰고 어떤 곳엔 { } 중가로를 쓰는지

잘 모르겠어서 공부해 보앗습니다.

중괄호 { }와 소괄호 ( )를 섞어 쓰는 이유는 자바스크립트가 코드를 해석하는 규칙 때문이에요. 이 원리를 알면 코드가 훨씬 명확해 보일 거예요! 🌟

1. 왜 ({ title }) 처럼 중괄호를 쓰나요? (구조 분해 할당) 🎁

원래 부모가 보내준 데이터는 props라는 커다란 상자 안에 들어있어요.

• 기존 방식: (props) => { ... props.title ... } (매번 상자를 열어서 꺼내야 함)
• 구조 분해: ({ title }) => { ... title ... } (상자를 받자마자 필요한 'title'만 쏙 꺼냄)

즉, 중괄호는 **"전달받은 객체 안에서 특정 이름의 데이터만 바로 꺼내 쓰겠다"**는 약속이에요. 코드가 훨씬 간결해지죠!

2. 왜 ({ ... }) 처럼 소괄호로 감싸나요? (객체 반환) 괄호의 마법 ✨

자바스크립트 화살표 함수에서 중괄호 { }는 두 가지 의미로 쓰여서 컴퓨터가 헷갈려 할 수 있어요.

1. 함수의 몸통: const func = () => { 실행할 코드들... }
2. 객체(Object) 데이터: { name: "철수" }

만약 우리가 함수에서 바로 객체 데이터를 결괏값으로 내보내고(return) 싶을 때, 그냥 중괄호만 쓰면 컴퓨터는 이걸 '함수의 몸통'이라고 착각해요. 그래서 **"이건 함수 몸통이 아니라 내가 내보낼 데이터(객체)야!"**라고 알려주기 위해 소괄호 ( )로 한 번 더 감싸주는 거랍니다.

---

어디서 듣기로 명시적인 부분에선 중가로{ }, 암시적인 부분엔 소가로 ( ) 를 사용한다는 이야기가있어요

사실 코드에 에러가 없다면 프로그래머 마음이라고 봅니다.

 

이 오해를 풀기 위해 사용하는 **소괄호 ( )**의 역할을 정리해 볼게요.

• { ... } 만 쓸 때: "이건 함수가 할 일들이야." (실행 블록)
• ({ ... }) 로 감쌀 때: "이 괄호 안에 있는 건 하나의 '덩어리 데이터(객체)'니까, 이걸 그대로 결괏값으로 내보내줘!" (즉시 반환)

덕분에 우리는 return이라는 단어를 일일이 쓰지 않고도 깔끔하게 객체를 전달할 수 있게 됩니다. ✨

---

이제 원리를 이해했으니, 

아래는 탭의 아이콘을 설정하는 screenOptions 부분입니다. 빈칸에 들어갈 괄호의 조합을 맞춰보세요!

JavaScript

 

screenOptions={ ({ route }) => __
  tabBarIcon: ({ color, size }) => {
    // 아이콘 표시 로직
  },
  tabBarActiveTintColor: 'tomato',
__ }

빈칸 __에 들어갈 알맞은 괄호는 무엇일까요? (힌트: 방금 배운 '객체를 즉시 반환하는 괄호'를 떠올려 보세요!)

 

 

정답은 바로 ({ ... }) 입니다!

• { }: "함수의 몸통이야. 코드를 실행해줘!" (실행 블록)
• ({ }): "이 안에 있는 건 객체야. 이걸 바로 반환(return)해줘!" (객체 즉시 반환)
• 이미 코드의 가장 바깥쪽에 screenOptions={ ... }라는 형태로 중괄호가 하나 있죠? 이건 리액트 네이티브에서 "이제부터 자바스크립트 코드를 쓸게"라는 약속이에요.
• 하지만 그 안에서 우리가 화살표 함수를 써서 객체 데이터(설정값 뭉치)를 즉시 내보내려면, 아까 배운 대로 **소괄호 ( )**가 한 번 더 필요합니다.

이제 소괄호의 중요성이 느껴지시나요? 괄호 하나로 컴퓨터가 코드를 읽는 방식이 완전히 달라진답니다. 🧠

공부중인 리엑트네이티브

사진과 같이 화살표 함수( => )에서의 중가로와 소가로 사용인데 

처음 자바스크립트를 배울 땐 모두 중가로{ } 만 사용했었는데 리엑트네이티브에선 소가로( )도 사용을 하더군요. 

 

핵심은 **"무엇을 생략하고 싶은가"**에 있습니다.

 

1. 중괄호 { } : "할 일이 많아요" (블록문) 🧱

우리가 가장 먼저 배우는 형태입니다. 함수 안에서 여러 줄의 코드를 실행하거나, if문 등을 써야 할 때 사용해요. 이 안에서 어떤 값을 밖으로 내보내려면 반드시 **return**이라는 단어를 써줘야 합니다.

JavaScript

 

const add = (a, b) => {
  const result = a + b;
  return result; // return이 꼭 필요해요!
};

2. 소괄호 ( ) : "바로 결과를 드릴게요" (암시적 반환) ✨

함수가 단순히 어떤 값을 즉시 반환만 하면 될 때 사용합니다. 소괄호로 감싸면 return 키워드조차 생략할 수 있어서 코드가 아주 간결해져요. 특히 JSX(화면 UI 코드)를 반환할 때 단골로 등장합니다.

JavaScript

 

// return 생략 가능!
const Welcome = () => (
  <Text>안녕하세요! 🖐️</Text>
);

---

여기서 가장 헷갈리는 포인트가 바로 **객체(Object)**를 반환할 때입니다. 자바스크립트에서 객체도 { }를 사용하기 때문에, 컴퓨터는 이게 '함수의 몸통'인지 '데이터 객체'인지 헷갈려하거든요.

자, 여기서 퀴즈입니다! 🧐 만약 아래와 같이 **사용자의 이름 데이터({ name: 'Kim' })**를 즉시 반환하는 함수를 만들고 싶다면, 어떤 괄호 조합이 올바를까요?

1. const getUser = () => { name: 'Kim' };
2. const getUser = () => ({ name: 'Kim' });

어느 쪽이 컴퓨터에게 "이건 실행 코드가 아니라 데이터야!"라고 정확히 알려주는 방법일까요? 괄호의 모양을 잘 살펴보고 골라보세요!

 

 

정답은 ! 2번 () => ({ name: 'Kim' })이 정확한 표현이에요. 🎯

자바스크립트 엔진은 {를 보면 "아, 이제 코드를 실행할 블록이구나!"라고 생각하는데, 우리가 소괄호 ( )로 한 번 더 감싸주면 **"이건 실행 블록이 아니라 통째로 내보낼 데이터(객체)야"**라고 확실히 알려주게 됩니다.

이제 리액트 네이티브 코드를 볼 때 ({ }) 형태가 나오면, **"아하! 어떤 객체 데이터를 바로 리턴(return)하고 있구나!"**라고 바로 읽어내실 수 있을 거예요.

 

그럼 여기서 대가로[  ] 를 안 알고 가면 손해죠!!

리액트 네이티브(자바스크립트)에서 대괄호 [ ]는 보통 두 가지 상황에서 마법처럼 등장합니다.

1. 데이터를 담는 바구니: 배열(Array) 🧺

가장 기본적으로는 여러 개의 데이터를 순서대로 담을 때 사용해요.

• 예: const fruits = ['사과', '바나나', '포도'];

2. 이름을 내 마음대로! : 계산된 속성 이름 (Computed Property Names) 🔑

내비게이션 설정이나 스타일을 다룰 때 가끔 이런 코드를 보실 거예요. 객체 { } 안에서 대괄호를 쓰면, **"대괄호 안의 변수 값을 속성 이름으로 쓸게!"**라는 뜻이 됩니다.

JavaScript

 

const keyName = 'color';
const style = {
  [keyName]: 'red' // 결과는 { color: 'red' } 와 같아요!
};

---

그런데 사실, 우리가 대괄호 [ ]를 가장 많이 보게 되는 곳은 바로 **'배열 비구조화 할당'**이라는 문법이에요.

혹시 리액트에서 가장 유명한 한 줄인 이 코드를 보신 적 있나요?

const [value, setValue] = useState(0);

 정말 친숙한 한 줄인데요 여기서 [ 초기값, 셋값] 을쓸때 대괄호를 사용합니다.

 

여기까지 적어 보고 다음엔 에러 중점 보고를 해 볼까 합니다

매일 손 타자(영문 200타 목표)로 코드를 치다 보니 오타와 계속 싸우고 매일 오타니 사진을 보며 욕을 하고 있어요

자바스크립트, 리엑트네이티브는 작은 오타 카멜 표기 속성의 대, 소문자 아주 엄격합니다 빨리 자동으로 수정하는 프로그램이  나오면 좋겠어요 사실 한글로 코드를 짜는 시점이 와도 오타는 장담 못할 거 같긴 해요 (내 일본 친구가 한국어를 더 많이 알아요 ㅠㅠ)

 

 

오늘 공부한 내용

 

 

<== 오늘 공부한 8장 내비게이션!! 다음에 안 올리겠습니다.

 

 

 

 

 본 후기는 [한글과 컴퓨터 x한국생산성본부 x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성되었습니다.