인프런 커뮤니티 질문&답변

Lee Ga In님의 프로필 이미지
Lee Ga In

작성한 질문수

처음 배우는 리액트 네이티브

기능 구현하기 - 수정

setIsEditing 실행 과정에 대해 질문이 있습니다.

작성

·

184

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
 
3:24 에 setIsEditing 에 관련해서 질문이 있습니다.
 
1. 47번째줄에 edit 컴포넌트의 onPress에 익명함수를 전달하고 있음을 이해했습니다.
 
1 - 1) IconButton.js를 보면, IconButton은 onPress가 들어올 경우 무조건 item.id를 onPress의 파라미터로 전달하고 있습니다. edit의 경우, item을 prop으로 전달하지도 않았고, item의 디폴트값도 id를 저장하고 있지 않습니다. 그런데 어떻게 에러 없이 동작이 되는지 궁금합니다.
 
1 - 2) 두번째로 IconButton은 setIsEditing함수가 무엇인지 모를텐데 어떻게 동작하는건지 궁금합니다.
 
 
2. 이 강의와 관련없이 저장할때마다 자동으로 props들을 추가하면 줄바꿈이 되는데 어떤 익스텐션을 쓰시는지 궁금합니다. vscode 익스텐션 전부 설치했는데 저는 자동으로 안되어서요 혹시 다른 익스텐션을 쓰시는건가요?
 
 
자바스크립트를 배운지 오래되어서 그런건지 리액트 기초나 동작원리를 이해 못해서 그런건지 명확하지 않은 부분이 많네요. 그래서 질문이 횡설수설한거 같습니다.
 
답변 주시면 감사하겠습니다.
 
 
 
 
 
 
 
 
 

답변 4

0

Lee Ga In님의 프로필 이미지
Lee Ga In
질문자

잘 이해가 되었습니다.

 

답변 감사합니다. 좋은 하루 보내세요.

0

김범준님의 프로필 이미지
김범준
지식공유자

1. IconButton.js 파일의 defaultProps에서 item을 { completed : false } 로 만들었기 때문에

item에 어떤 값이 전달되지 않더라도 item = { completed : false } 이 됩니다. 

따라서 item.id는 undefined가 됩니다. 

 

2. 네, 맞습니다. 

 

3. 음, 코드로 볼때와 그림으로 시각화 했을 때랑 약간 차이가 있을것 같습니다.

먼저 코드로 얘기하면, 사용된 컴포넌트의 코드가 복사된다고 생각하면 됩니다. 

예를 들어 Task 컴포넌트를 보면  <IconButton /> 이 사용되었죠?

이게 IconButton 컴포넌트의 코드가 해당 위치에 복붙된 상태로 실행된다고 생각하면 됩니다. 

 

그림으로 표현한다면, 위에 그려진다고 말할수도 있겠네요. 

그런데, 저는 위에 그려진다는 표현보다는 안에 그려진다는 표현이 조금 더 좋다고 생각합니다. 

위에 그려진다는 표현은 아래있는 것을 가리면서 위에 그려진다는 느낌이 강해서요. 

IconButton 컴포넌트는 Task 컴포넌트 안에 그려진거죠. 

약간 말장난처럼 보일 수 있는데, 머리속에서 상상할때

A와 B가 겹쳐져 있느냐, 아니면 A가 B 안에 있느냐, 라서 생각보다 차이가 조금 있습니다. 

텍스트로 설명하다보니 표현에 한계가 있는데 이해가 되셨나요?

0

Lee Ga In님의 프로필 이미지
Lee Ga In
질문자

빠른 답변 감사합니다. 

1-1 질문에 대해 추가적인 질문이 있어서 답변 답니다. 

 

"그리고 전달된 onPress를 호출 할 때 id를 포함해서 onPress(item.id) 로 호출합니다" 

1. 이 부분에서 edit을 위한 IconButton에는 item이라는 객체를 전달하지 않았는데, 그럼 item.id 의 값은 undefined가 되는건가요?

2. item.id 값이 어떠하든  () => setIsEditing(true)  함수는 item.id를 사용하지 않으므로 설령 item.id가 undefined라도 에러 없이 실행이 되는건가요? 

3. 위 질문과 관련 없는 질문입니다만, 다른 파일에서 컴포넌트를 가져올 때 IconButton 컴포넌트를 task 위에 그리고, task 컴포넌트가 app 파일 위에 그려지는건가요? 

0

김범준님의 프로필 이미지
김범준
지식공유자

안녕하세요 Lee Ga In 님, 

 

1 번 질문은 자바스크립트에 대한 질문이네요. 

1-1) 예를 들어 다음과 같은 함수가 있다고 하겠습니다. 

const testFunc = ( ) => {
    console.log('test');
}

이 함수를 testFun()로 호출해도 test 라고 나타나고, testFun('123') 으로 호출해도 test라고 나타나겠죠?

파라미터로 어떤 값을 전달하더라도 함수에서 받아서 사용하지 않기 때문에 문제되지 않습니다. 

코드를 보면, IconButton 컴포넌트의 onPress () => setIsEditing(true) 라는 함수를 전달합니다. 

그리고 전달된 onPress를 호출 할 때 id를 포함해서 onPress(item.id) 로 호출합니다. 

onPress로 전달된 함수에서 파라미터를 받아서 사용하지 않기 때문에, 전달된 item.id는 사용되지 않아서 문제가 발생하지 않습니다. 

 

1-2) 1-1 질문과 연결이 되는데요,

IconButton의 onPress에 전달된 함수는 () => setIsEditing(true) 입니다. onPress는 setIsEditing이 어떤 행동을 하는 함수인지 알 필요가 없고, () => setIsEditing(true) 라는 함수를 실행시킬 뿐입니다. 

 

2) Prettier를 설정하면 됩니다. VS Code extensions 에서 Prettier 검색하시고, Prettier - Code formatter를 설치하세요. 

그 다음 VS Code의 설정에서 Save On Save에 체크표시 하시고, 
Default Formatter를 Prettier - Code formatter 로 변경하시면 됩니다. 

 

 

즐거운 하루 되세요

감사합니다

 

Lee Ga In님의 프로필 이미지
Lee Ga In

작성한 질문수

질문하기