React 실습 -3

호호호호 실습2를 마치고 오셨나?

그렇다면 아직 멀었군ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

실습 2에서 한 일들은 효율적이지 않아!!!

왜냐하면 우리가 새로운 음식을 추가할 때 마다 복붙을 해야 하거든!!

우리는 복붙을 원하지 않아! 데이터는 처음부터 우리가 가지고 있던 데이트가 아니기 때문이야

이 데이터들은 웹사이트에서 온 데이터들이야.

따라서 우리는 갖고 있지 않은 데이터를 복붙 할 수 없어!

 

따라서 이제 할 방법은 웹사이트에 동적 데이터를 추가하는 방법이야! 가보자고~

 

우리가 할 것은 데이터가 있다고 시뮬레이션 하는거야.

데이터가 이미 API에서 왔다고 생각해보자!

 

따라서 다음 할 일은 함수를 만드는거야, 다른 함수는 foodILike라고 불리는 array야

이것은 food의 배열이 될거야!

 

기본적으로 모든 컴포넌트를 랜더링 해보자고!

 

모두를 랜더링하지만 역동적이게~~

 

그래서 어떻게 object의 list를 가져오는지 보여줄거야 오직 JS의 object들만!

그리고 function component, food component를 동적으로 랜더링 할거야!!

 

food의 array를 구성해보자

이제 우리는 여러 데이터들을 갖고 있지!

 

그렇다면 이걸 어떻게 array로 가져오고 자동적으로 내가 좋아하는 food를 이름과 함께 랜더링 할까?

 

그래서 JS 함수를 이용하려고 해!

지금이 React가 단지 javascript라고 말했던 그 경우야!

 

왜냐하면 JS에는 map이라고 하는것이 있거든

여기서 map이 하는것은 랜더링이야

 

map은 array의 각 item에서 function을 실행하는 array를 가지는 JS function이고

그 function의 result를 갖는 array를 너한테 줘

 

뭔 소린지 모르겠다고 ? 해보자고 쉬움쉬움!

 

배열 변수를 설정해두고!

friends array

실행한다면 ?

//ES6
friends.map(function(current) {
    console.log(current);
    return 0;
})

//구JS
friends.map(current => {
    console.log(current);
    return 0;
})

 

두둥 결과!

콘솔에 dal, mark, lynn, korean guy가 찍힌다!

그리고 4개의 0을 반환한 item의 array를 가지고 있다!

 

이 말인 즉슨, map은 function을 취해서 그 function을 array의 각 item에 적용!

한번은 dall 한번은 mark 한번은 lynn 한번은 korean guy에게!

그리고 각 연산의 결과로 array를 만들고 각 연산의 result는 항상 0이지!

 

따라서 우리는 0 0 0 0 array를 가져! 완벽해~

 

--

function App() {
	return (
    	foodILike // 이렇게 쓰면 text
        {foodILike} //이렇게 쓰면 자바스크립트!
    )
}

 

따라서 이렇게 코드를 작성한다면!?

결과!!

여기서 dish는 중요하지 않음 그냥 각각의 item으로 이해!

하지만 dish가 object라는건 기억하셈 매우매우매우매우 중요!!! object다~~~

그리고 이 object는 현재 처리 중!!

따라서 dish는 Kimchi object, Samgyeopsal object, Bibimbap object, Doncasu object야!

오케이~?

 

그럼 일반적인 JS object처럼 이 object들 내부에서도 object.name, object.image를 가지고 있겠지?

오케이 또 해보자고!

 

이미지를 불러오려고 picture={dish.image} 코드를 추가 했어!

그리고 결과를 보면 아무런 이미지가 없어

아직 프로그래밍 안했잔아 ..

오케이 ㄱㄱ

 

이제 런하면?

 

오야스~~~

여기까지 React 실습-3 이였습니다!!

 

더 달릴거야 허리 한번 피고 하자~~~

 

 

참조: nomadcoders.co/