Blog Day 30: React(Using map() to Loop, Component-Based)

Inseo Park·2021년 8월 6일

CODESTATES Data scientist bootcamp daily velog

Path to Data Scientist

목록 보기

29/58

1. TIL (Today I Learned)

Using map method to loop

You will be learning map method when rendering different data using React.
The example will be about a blog post of Mr. Kim Coding.

If there are only 2 posts in his blog, below code is enough. Putting every data into our codes is called "hard coding."

const posts =[
	{id: 1, title: "Hello World", content: "Welcome to learning React!"},
    	{id: 2, title: "Installation", content: "You can install React via npm."}
        ];
        
function Blog() {
  return (
    <div>
      <div>
        <h3>{posts[0].title}</h3>
        <p>{posts[0].content}</p>
      </div>
      <div>
        <h3>{posts[1].title}</h3>
        <p>{posts[1].content}</p>
      </div>
    </div>
  );
}

But, if Kim Coding's blog has 100 posts. Then, we will have to edit our codes everytime a new blog is posted. We now can use map method to solve such problem.

Using map to loop

Currently, properties of 'posts' are id,title, and content. We can put the data into the HTMl elements accordingly to show the information using React.

Pseudo-code
Map the properties of the array(posts) into another array using a function(postToElement).

The code below shows how you can use components to become reusable components.

function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  
  const blogs = posts.map(postToElement);
  return <div className="post-wrapper">{blogs}</div>;
  }

Question 1: Can you use map method right away into the return code?
Ans: Yes, JSX allows you to include any type of data by just simply putting a brace({}) around the data. It is all up to the programmer to deciede to use it as a variable or a direct return statement, just consider the readability of your like.

'key' Property

If you do not include the key property using the map() method in React,the following 'warning' will be shown.

!Warning: Each child in a list should have a unique "key" prop.
** Include the key property in the first element of the map method

Question 2: Should the key property be the id? What if there is no id?
Ans: If possible, the id should assigned to the key property because just like the id, the key doesn't chnage, is predictable, and unique. If there is no id, using the array's is also possible but as a last resort only.

function Blog() {
  // you can write like the code below and not divide another function(postToElement)
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content</p>
    </div>
  ));

return <div className="post-wrapper">{blogs}</div>;

An example on how the map function in React makes the program much easier to write and maintain.

const posts = [
  {id: 1, title: "Hello World", content: "Welcome to learning Ract!"},
  {id: 2, title: "Installation", content: "You can install React via npm."}
  {id: 3, title: "Practice", content: "Practice React via npm run start"}
  ];
  
const blogs = posts.map((post) =>
  <div key={post.id}>
    <h3>{post.title</h3>
    <p>{post.content}</p>
  </div>
);

export default function Blog() {
  return (
    <div>
      <div>
        // old-school way of including data into the component.
        <h3>{posts[0].title}</h3>
        <p>{posts[0].content}</p>
      </div>
      <div>
        <div className="post-wrapper">{blogs}</div>
      </div>
      </div>
    );
  }

Component Based

What is Component?

It is a collection of several types of codes for implementing a single fucntion.
It is an essential component of User Interface.

const Component = () => {
  return (
    <>
      <div>{justification1}</div>
      <div>{justification2}</div>
    </>
  )
};

The application consists of different components.

Reacct applications can express the relationship between components in a tree structure.

Imagine you are youtube's front-end developer.

                    ----  Search
        --- Header
                   ----  Setting
 
 Root---
                       -----  Content
        --- ContentList
                       ------ Content

Each component has its own function and is responsible for a part of the User Interface(UI).

We have been studying CSS(style), JS(function), & HTML(structure) to make a web application.

However, when wanting to change the location of the side bar in a web application using HTML,CSS, and JS you have to first change the HTML then JS accordingly. However, with React you simply have to change the location fo the component of the application.

Questions

    const Hello = () => {
      return (
        <div>Hello</div>
        <div>Myname</div>
      )
    }
    ** This is a wrong way to make a fucntion component in React because you need to
    surround elements with a tag when there are 2 or more elements.
    
    const Hello = () => {
      return (
        [<div>Hello</div>,
        <div>Myname</div>]
      )
    }
    
    ** This is the correct way. [];

computeWhenDouble

You need to input the annual interest rate and return the time (in years) it takes for the principal to double or more.

My code:

function computeWhenDouble(interestRate) {
// if the principal is not equals 200 which is double the current principal, counter increases by 1 and the principal is added to the interestRate/ 
  let principal = 100;
  let newInterestRate = interestRate/100;
  for (i = 0; i <= 200; i++) {
    let counter = i
    if (principal < 200){
      principal = principal * newInterestRate + principal;
      counter = counter + 1;
    } else if (principal => 200){
      return counter;
    }
  }
  return counter;
}

Reference Code:

 function computeWhenDouble(interestRate) {
  let rate = 1 + interestRate / 100;
  let principal = 1;
  let year = 0;
  while (principal < 2) {
    principal = principal * rate;
    year++;
  }
  return year;
}