React를 사용하면서 모듈화는 기본이자 핵심인 것 같다.
아주 간단한 코드를 모듈화 해서 작동해보겠다.
- 위의 출력문은 그냥 HTML로 쭉쭉 써나간 것 같지만 모듈화를 통해 출력한 것 이다.
- App.js 를 포함해서 사용한 컴포넌트는 다음과 같다.
위의 컴포넌트 중 recipeData.js 는 출력문의 데이터를 저장한다.
이제 하나씩 따라가보면서 모듈화를 통한 출력을 해보자.
1. App.js
1-1. h2태그로 "요리백과" 를 출력한다.
** 아래 파란부분을 의미한다.
1-2. App.js에서 Menu 컴포넌트를 import해서 Menu태그를 호출하고 있다.
2. Menu.js
2-1. Menu.js 에서 해더에 “맛있는 조리법” 을 출력하고 div에 recipeData 에 담겨있는 레시피들의 객체를 map 으로 하나씩 읽으면서 그 값을 Recipe 컴포넌트를 import한 Recipe태그로 전달한다. Recipe는 펼침연산자를 통해 recipeData의 객체의 프로퍼티를 펼쳐서 데이터를 하위 컴포넌트(Recipe.js)로 넘겨준다.
** 아래 파란부분을 의미한다.
3. Recipe.js
3-1. Menu.js 에서 받은 펼침연산자를 객체 구조분해(빨간줄)로 받아서 h1태그에 name을 출력하고 “ingredients 프로퍼티”를 IngredientsList.js 로부터 import한 IngredientsList으로 보내고 “steps 프로퍼티”를 Instructions.js 로부터 import한 Instructions으로 보낸다.
** 아래 파란부분을 의미한다.
4. IngredientsList.js
4-1. Recipe.js 에서 받은 ingredients 프로퍼티를 list로 받아서 map을 통해 하나씩 읽는다. 그리고 읽어낸 list의 프로퍼티 값을 펼침연산자를 통해 “Ingredient.js” 로부터 import 한 Ingredient으로 보낸다.
** 아래 파란부분의 ul태그를 의미한다.
5. Ingredients.js
5-1. IngredientsList.js 에서 받은 ingredient의 값을 객체 구조분해로 받아서 각 프로퍼티를 li안의 span에 출력해준다.
** 아래 파란부분의 한줄한줄을 map으로 꺼낸 것이다.
6. Instruction.js
6-1. Recipe.js에서 받은 title과 steps를 객체 구조분해로 받아서 title은 출력해주고 steps 는 map을 통해 하나하나 출력해준다.
** 아래 파란 부분은 title, 빨간 부분은 steps를 map으로 한줄한줄 꺼낸 것이다.
