1. 함수의 인자가 () 라면?

• 인자를 받지 않는 함수는 계속 결과를 반환한다. 데이터 자체를 받아 오지 않기 때문에 결정된 결과만 반환한다.
• React에 이벤트 객체도 마찬가지다. 이벤트를 받아 오지를 않고, 결과로 쓴 return 값만 반환할 것이다.

2. 함수의 인자가 함수라면? (콜백 함수)

• 인자로 받은 함수를 실행하고, 나아가 실행된 함수가 나온 값으로 다시 밖의 함수를 실행한다. 이름을 통해서 다시 그 함수를 실행시킬 뿐이다.
• 내부의 함수가 어디를 보고 있는지가 중요하다. 주소가 헷갈릴 수 있다.
• 왜 이런 짓을...?
  • 함수를 전달한다는 것은, 그 함수가 가진 레퍼런스가 전달된다는 의미이다. 가장 밖의 함수의 인자는 그저 값을 전달받고 있고, 그 안의 함수로 인자를 받고 있으니, 그 안의 함수의 인자만 조절하고, 가장 밖의 함수를 호출할 때 들어갈 인자로 함수를 넣어주면 내부의 함수에서 받은 인자로 가장 밖의 함수를 호출하게 된다.
  • 결론은, 재사용성이 높아진다. 가장 밖의 함수가 인자들을 넣어주고 호출할 때 그 인자들이 필요한 함수를 호출하게 되기 때문이다.

3. 리액트의 데이터를 가져오는 것과 랜더링 되는 것은 다르다!

• 말 그대로다. props로 데이터를 가져오면 컴포넌트를 이용해 올바르게 렌더링 한다.
• 가지고 오는 정보는 많아도 화면에 노출시키기 않아도 되는 정보들도 있다. (id 라던가)
• 콘솔 창이나 console.log를 중간에 넣어서 어떤 정보를 가지고 오고 있는지 확인하고, 렌더링 할 때 내가 원하는 정보를 선택적으로 가져올 수 있다.

리액트에서 아직도 원하는 인자를 정확히 전달할 수가 없다
내일 할 일을 정확히 정해서 아무것도 안 하는 시간을 줄이자!

1. 리액트 애플리케이션

• 리액트 애플리케이션은 단 하나의 컴포넌트 만을 렌더링 한다.
• 즉, 우리가 계속 쓰고 있는 index.js 파일의 가장 아래 부분에서 App.js를 ReactDOM으로 가져와 렌더링 한다.
• 다른 컴포넌트는 중간에 끼일 수 없고, 결론은 그 렌더링 된 App.js 안에서 우리는 모든 작업을 하게 된다.
• 결국, 렌더링 되는 것은 App.js 뿐이다. 그래서 HTML을 보면 깔끔하다. 그저 하나의 컴포넌트 만을 불러오고 있기 때문이다. 그래서 속도도 빠른 것이다!

2. React와 함수의 오묘한 관계

• 리액트 안에서 만드는 파일을 js로 만들어 그것을 사용하면 그것 또한 '컴포넌트'이다.
• 더 신기한 건 파일 안에서 만드는 함수도 컴포넌트이다. 말하자면 파일을 만든다 => 컴포넌트를 만든다.
• 물론, 사용법도 둘 다 같다. 파일을 외부에서 만들었을 때는 import만 잘해주면 된다.

3. 컴포넌트와 props의 공략

• 결국, 컴포넌트는 사용했던 자료를 재사용하기 위해 사용하는 것이다.
• 그 컴포넌트를 사용할 때 우리는 'props'를 사용한다. 컴포넌트 안에서 props로 어떠한 요소를 정해주고 그 요소의 값으로 어떠한 요소를 넣는 것이다!

function Hi() {
    return <h1>Hello World!</h1>
}

function App() {
    return (
    <div>
      <Hi name="HyeonSi" /> // 'Hi' 라는 컴포넌트에 'props'로  'name'을 주고 그 값으로는 'HyeonSi'를 주었다.
    </div>    
    )
}

• 당연히 props로 보낼 수 있는 것은 타입과 개수에 상관없다.
• 결국, 이 props로 컴포넌트의 정보를 원하는 대로 저장할 수 있는 것이다!
• 그래서 props를 어떻게 사용하는가?

function Hi(props) {
    console.log(props); // Object(객체) 그 안에, name: HyeonSi 가 있다!
    return <h1>Hello World!</h1>
}

function App() {
    return (
    <div>
      <Hi name="HyeonSi" />
    </div>    
    )
}

• props는 Object 형태로 전달된다. 하지만 바로 내부의 내용만 전달할 수도 있다. 위의 Hi 함수에서 인자를 props가 아닌 ({ name }) 의 형태로 바로 키를 적어서 그 키 만, 가지고 올 수도 있다.
• 물론, 가져온 props는 함수 안에서 어디든지 {}와 함께 사용할 수 있다.

function Hi({ name }) {
    return <h1>Hello { name }!</h1>
}

<Hi name="HyeonSi" /> // Hello HyeonSi!
<Hi name="Mark" /> // Hello Mark!
<Hi name="Hendrix" /> // Hello Hendrix!
<Hi name="James" /> // Hello James!

• Hi라는 컴포넌트를 사용함에 있어, name이라는 변수를 이용하듯이 계속 사용할 수 있다! 즉, 동적인 데이터를 가진 컴포넌트이지만, 재사용이 매우 용의 하다

4. map을 이용해서 더 불편함을 줄여보자

• map을 이용하면 어떠한 정보를 받던지 반환되는 값은 array로 각 요소들을 하나하나 적용시켜 반환하게 된다.
• map안에 들어갈 인자는 객체이다! 그리고 그것을 다시 함수(화살표 라던지)로 처리하면 이제야 하나하나 요소 하나하나가 적용되는 배열로 나오게 되는 것이다!
• map 안에 받을 인자로 함수 자체를 넣을 수 있다. 이때 함수는 컴포넌트를 리턴하게 될 것이고 그 리턴될 함수의 props들이 map에서 받을 수 있도록 있어야 한다. 하지 만 이 기능은 map으로 모든 '함수' 들을 돌려서 배열로 반환하기 때문에 함수들이 각 각의 키와 값을 가지고 리턴되는 형식이다. 한 컴포넌트의 키와 값을 배열로 받아 리 턴되는 것이랑은 조금 다르다!
• 객체의 엘리먼트들이 map의 리스트 안에 들어가게 될 때, 그들은 유일성을 잃는다. 물론 각각 다른 이름이나 정보들을 가지고 있다고 해도 말이다. 그래서 react는 각 요 소들을 다른 것들이라고 인식하지 못하기 때문에 유일한 key 값(대부분 유일할 수밖에 없는 id)을 props로 줘서 모든 요소들이 다른 것이라는 것을 react에게도 알려 줘 야 한다.
• 위의 key가 항상 있어야 하는 것과 마찬가지로 img 태그에는 art 도 props로 전달받아야 한다고 한다.

리액트를 눈감고 할 수 있을 정도가... 되고 싶다...!
하지만 아직 헷갈리는 것은 사실ㅋㅋ... 하지만 원리는 완벽히 아는 것 같고 이제 점점 시도해 보면서 삽질하면 될 것 같다.

1. className 자잘한 팁

• JSX에서는 class를 className으로 쓴다.
• 자식 컴포넌트에 클래스를 지정했다면, 이후, 부모 컴포넌트에서 태그 안에 클래스를 설정해서 자식 컴포넌트에 설정된 클래스를 덮을 수 있다.

2. props를 넘겨준 정보를 사용하기

• 부모 컴포넌트에서 map을 이용해 각각의 객체의 요소들의 이름을 따로 설정해서 props로 넘겨주고, 이후 그것을 다시 {} 안에 넣어서 사용한다.
• props로 넘어온 순간, 자바 스크립트가 된다. 그래서 자식 컴포넌트 안에서 정확히 틀을 잡고 넘어온 정보를 받는다.
• 넘어온 정보를 사용할 때도 태그에 맞게 사용해야 한다. 이미지 자료를 가지고 와서 a 태그 같은 곳에 넣어 놓으면 나오지 않는다.
• return을 한다면, 반환되는 값이 나오고, 이것은 함수 밖에서도 사용할 수 있다는 것을 잊지 말자.

어떻게 어떻게 갤러리를 완성은 했다.
하지만 올바르게 test 가 통과되지는 않았다. 아직 기본이 부족한 것 같다. 이번에 배울 때 다시 완벽히 하면 될 것 같다.

1. Props를 받아서 사용하는 법.

• props에서 가장 중요한 것은 자식 컴포넌트에서 어떤 자료를 어떤 이름으로 부모 컴포넌트로 보내서 부모 컴포넌트는 어떻게 사용할 것인가?이다.
• props는 유저가 수정이 불가능한 자료를 보낸다.

2. 본문(부모 컴포넌트)에서 props를 사용하기

• 주로 전체 목록을 보여줄 때 사용한다.
• map과 함께 사용하자!
• map 메서드는 자바스크립트에서 사용하는 것이기 때문에 {} 안에 넣고, 똑같이 사용하듯이 해 주면 된다.
• return 되는 값은 자식 컴포넌트 자체가 될 것이고, 그 안에서 key값을 꼭 id와 같은 유일한 것으로 설정하고, 받아올 props의 이름과 그에 맞는 주소를 정확히 적어 준다.
• 주의! : 주로, map을 돌고 난 자료들 즉, map에서 정해준 이름을 사용해야 똑바로 map 이후에 나올 자료들이 들어간다.
• 뭔가 이상하다? : 자식 컴포넌트를 보면서 똑바로 자료를 받고 있는지 살펴본다 => 부모 컴포넌트의 map의 구조를 잘 살펴본다. =>
  props로 어떤 자료를 받고 있는지 정확히 찾아가 본다. => 오타를 살펴본다.

점점... 초반부에 배운 것이 흔들린다. 다시 복습을 탄탄히 해야 할 것 같다.
알고리즘 문제는 착실히 하루에 2개라도! 하자.