4 asked

0

잘 이해가 되었습니다.

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

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

빠른 답변 감사합니다. 

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 로 변경하시면 됩니다. 

즐거운 하루 되세요

감사합니다