2021.06.14(Mun.) <기본을 넘긴 React 총정리>

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로 전달받아야 한다고 한다.

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