Section 08: Time to Practice - Time to apply what we learned thus far

The goals

💪🏻Let's Practice What We've Learned!

 

event.preventDefault()

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

For example, this can be useful when:

• Clicking on a "Submit" button, prevent it from submitting a form
• Clicking on a link, prevent the link from following the URL

Note: Not all events are cancelable. Use the cancelable property to find out if an event is cancelable.

Note: The preventDefault() method does not prevent further propagation of an event through the DOM. Use the stopPropagation() method to handle this.

 

 

Module CSS

CSS Module example

The CSS in a CSS module is no different than normal CSS, but the extension of the file is different to mark that the file will be processed.

src/components/container.module.css

.container {
margin: 3rem auto;
max-width: 600px;
}

 

src/components/container.js

import React from "react"
import * as containerStyles from "./container.module.css"

export default function Container({ children }) {
return (
<section className={containerStyles.container}>{children}</section>
)
}

 

In this example, a CSS module is imported and declared as a JavaScript object called containerStyles. Then, a CSS class from that object is referenced in the JSX className attribute with containerStyles.container, which renders into HTML with dynamic CSS class names like container-module--container--3MbgH.

CSS class

If we want to use CSS class to decorate our file then when we import that CSS file we should import 'classes'

because it's CSS modules

If it was non-module CSS file then we can just write 'import './Card.css'' but since we are using module css it should be different!

We put the exact css decoration item on the exact component we wanna apply.

So in this case, we wanna decorate input tag with our css files.

 

Note: Always start component names with a capital letter. (사용자 정의 컴포넌트)

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

 

사용자 지정 속성 첫 단계

동일한 색상을 여러 클래스에 적용하는, 다음의 간단한 예제로 시작하겠습니다.

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

HTML에 적용해보겠습니다.

<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three">
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>

결과는 다음과 같습니다.

반복되는 CSS에 주목해보세요. 배경 색을 여러 곳에서 brown으로 지정하고 있습니다. 일부 CSS 선언의 경우 더 상위 단계로 반복되는 항목을 옮겨서 CSS의 상속을 통해 자연스럽게 해결할 수도 있습니다. 그러나 보다 복잡한 프로젝트의 경우 항상 이렇게 할 수 있는 것은 아닙니다. 이 때 :root 의사 클래스에 사용자 지정 속성을 선언하고, 필요한 곳에서 그 속성을 참조함으로써 반복 코드의 필요를 줄일 수 있습니다.

 

CSS Module

이번에는 CSS Module 이라는 기술에 대해서 알아봅시다. 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있습니다.

CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때에는, CSS 파일의 확장자를 .module.css 로 하면 되는데요, 예를 들어서 다음과 같이 Box.module.css 라는 파일을 만들게 된다면

Box.module.css

.Box {
  background: black;
  color: white;
  padding: 2rem;
}

리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 모두 고유해집니다. 고유 CSS 클래스 이름이 만들어지는 과정에서는 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용 될 수 있습니다.

예를 들어서 Box 컴포넌트를 만든다면 다음과 같이 코드를 작성하는데요

Box.js

import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

className 을 설정 할 때에는 styles.Box 이렇게 import로 불러온 styles 객체 안에 있는 값을 참조해야 합니다.

클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일에 대하여 걱정 할 필요가 없습니다.

이 기술은 다음과 같은 상황에 사용하면 유용합니다.

• 레거시 프로젝트에 리액트를 도입할 때 (기존 프로젝트에 있던 CSS 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 해줍니다.)
• CSS 클래스를 중복되지 않게 작성하기 위하여 CSS 클래스 네이밍 규칙을 만들기 귀찮을 때

 

form, label, input, div 등 기본적인 html컴포넌트들은 모두 리액트에 의해 미리 설정된 것으로 Props라는 클래스 이름과 함께 작동하고 기본적으로 렌더링된 html에 적절한 css클래스를 적용함. 하지만 사용자 정의 컴포넌트들은 이 className이라는 속성과 어떻게 작업해야 하는지를 모름. 왜냐하면 그것이 내장된 html컴포넌트가 아니라 사용자 정의 컴포넌트이기 때문-> 사용자 정의 컴포넌트는 일단 대문자로 만들어줘야함

그래서 Card컴포넌트에 가서 className속성을 받아들여서 처리할 수 있도록 만들어줘야함 

-> 결국 우리가 원하는 것은 className의 도움으로 div에 적용하고 있는 css클래스가 이미 적용하고 있는 card클래스에 반영되는 것뿐만 아니라 Card컴포넌트의 className props에 잠재적으로 들어오는 클래스에도 적용되도록 하는 것

 

So we do like this to make one coming from the card module CSS file, and one coming from outside, from the props, potentially coming via props.

We used className but it can be any name like above.

If we wanna use some CSS codes that we already used somewhere then if we can just import it then it's easier for us not to write that code again. But if we just simply import it to one component and the other components would not know they also need to change the looking of it, in this case, we can make them refer to props and get it.

 

 

 

tip!

If we import Javascript file into the same Javascript file then we don't have to put file format (.js) but if it's different then we should specify it. (.css)

 

And now we will get the user input and get the data from it and make a list with using those data.

How can we do?

We will use 'useState' which detects the change of state and work with it.

const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState("");
  const [enteredAge, setEnteredAge] = useState("");

  const addUserHandler = (event) => {
    event.preventDefault();
    if (enteredUsername.trim().length === 0 || enteredAge.trim().length === 0) {
      return;
      // If we return here then the next code doesn't work
    }
    if (+enteredAge < 1) {
      return;
      // like -1, -2...
      // by using '+' it will be secured to be number
    }
    console.log(enteredUsername, enteredAge);
    setEnteredUsername("");
    setEnteredAge("");
  };

  const usernameChangeHandler = (event) => {
    setEnteredUsername(event.target.value);
  };

  const ageChangeHandler = (event) => {
    setEnteredAge(event.target.value);
  };

  return (
    <Card className={classes.input}>
      <form onSubmit={addUserHandler}>
        <label htmlFor="username">Username</label>
        <input
          id="username"
          type="text"
          value={enteredUsername}
          onChange={usernameChangeHandler}
        />
        <label htmlFor="age">Age (years)</label>
        <input
          id="age"
          type="number"
          value={enteredAge}
          onChange={ageChangeHandler}
        />
        <Button type="submit" onClick="">
          Add User
        </Button>
      </form>
    </Card>
  );
};

Because we didn't give any props to the 'UsersList' component so it's empty now = undefined

We send our 'users' as a list form like this.

Why we put in app? because if we put this in AddUser component it seems a bit weird.

AddUser component sounds like it will only work to add user's data and output it.

So we can use 'map' method to make a new array.

이제 우리는 usersList의 상태를 관리해야함. 왜냐? 처음에는 빈 어레이겠지만 나중에 아이템들이 채워지면 그 어레이를 사용해서 밑에 리스트를 보여줘야하기 때문에. 그런데 어디서 이 리스트에 접근하고, 어디서 관리를 해야할까?

접근은 일단 usersList데이터를 가져올 수 있는 곳에서 접근해야 하는데 이는 AddUser컴포넌트에서 가능하다. 그렇다고 해서 list를 adduser컴포넌트에 배치해버리면 users의 상태를 adduser컴포넌트에서 관리해야하는데 이는 비효율적. 왜냐면 users라는 props가 필요한것은 list컴포넌트니까.

그러면 어떻게 users에 접근해서 데이터를 불러올 수 있을까

우리는 app.js에서 users의 상태를 관리하도록 할 것. 왜냐면 이 컴포넌트가 AddUser와 UsersList컴포넌트보다 한 단계 위에 있고 이 두 컴포넌트 위에 있으면서 가장 가까운 컴포넌트이고 두 컴포넌트에도 접근가능하기 때문.

 

 

And it can be changed like this!

 

Don't forget that when we make a list with React, we need to give 'Key' on the list!

 

And we made modal for the error screen.

Where should we render this error modal?

=> It should be rendered in user component

why?

Because ultimately it will be this component that will trigger the modal.

We can may argue that it's general overlay over the entire UI and therfore logically it should be rendered as high as possible in the component tree.

Something like inside of the app component or anything like that.

 

Now our job is that we should show this modal for only some specific situation when we have errors.