React 기초: 스타일 및 처리 양식

안녕, 세상.👋

This is the 6th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and understood in my own way. This is not in any way officially associated with Kent C. Dodds or EpicReact.Dev. You would learn a lot more when you actually go through the EpicReact.Dev video explanations and workshop material yourself. The workshop material is also self-paced and open source. So, if you want to do the workshop yourself, you can go to React Fundamentals Workshop Repo and follow the instructions there.

이 문서에서는 React에서 스타일링하는 방법을 설명합니다.React에서 양식을 처리하는 방법도 학습합니다.

Styling

Inline CSS

Regular CSS

Handling Forms

Using event.target

Using Refs

Using useState

스타일링

React에서 요소의 스타일은 주로 두 가지 방법이 있습니다.하나는 내연 CSS를 통해서, 다른 하나는 클래스 이름만 추가하고 외부 CSS 파일에서 스타일을 설정하는 것입니다.

내부 연결 CSS

HTML에서 style 속성에 스타일을 문자열로 추가하여 요소에 내연 스타일을 추가할 수 있습니다.

<div style="color: red; font-style: italic;">Red Italic Text</div>

React에서 style 아이템에 스타일을 추가할 수 있지만, string 아이템은 Style Object이 아니라 style을 수락합니다.
주:

스타일 대상의 특성은 낙타봉 대소문자를 사용합니다.
예를 들어 CSS의 background-color은 style 객체의 backgroundColor입니다.

Know More

const elementStyle = {
    color: 'red',
    fontStyle: 'italic'
}

<div style={elementStyle}>Red Italic Text</div>

하면, 만약, 만약...

<div style={{ color: 'red', fontStyle: 'italic' }}>
    Red Italic Text
</div>

일반 CSS

elementStyle 속성을 추가한 다음 외부 CSS 파일에서 스타일을 설정하여 요소에 스타일을 추가할 수 있습니다.

<div className="container">Hello World</div>

.container {
    margin: 0 auto;
    background-color: red;
}

테이블 작업

The example used in this section is directly taken from React Fundamentals Workshop by Kent C. Dodds's

이벤트를 사용합니다.목표

다음 형식을 고려하다

<form>
  <div>
    <label htmlFor="usernameId">Username:</label>
    <input id="usernameId" type="text" name="username" />
  </div>
  <button type="submit">Submit</button>
</form>

현재, React의 폼 처리는 일반javascript의 처리와 매우 비슷합니다.제출 처리 프로그램을 정의하고 폼에 할당하는 onSubmit 이벤트만 정의하면 됩니다.

<form onSubmit={handleSubmit}>
    ...
    ...
    ...
</form>

function handleSubmit(event) {
    // This prevents the default behaviour of form submission
    // If you don't add this, the page will be refreshed 
    event.preventDefault()

    /** 
     You can get the value of username in one of the following ways.        
        (through the position of input)
        -> event.target.elements[0].value

        (through id)
        -> event.target.elements.usernameId.value

        (through name)
        -> event.target.elements.username.value
    **/

   // Do whatever you want with the username
}

메모:

Know more about Event.preventDefault

참고 문헌을 사용하다

REF를 사용하여 React의 요소에 대한 참조를 얻을 수 있는 다른 방법도 있습니다.
REF는react의 특수한 객체로 구성 요소의 렌더링 사이에 일치하며 변경해도 구성 요소가 다시 렌더링되지 않습니다.className을 사용하여 Ref 생성 가능

const myRef = React.useRef()

ref에는 ref의 값이 포함된 React.useRef() 속성이 있습니다. current을 React 요소에 분배하면 ref은 자동으로 대상에 대한 인용이 있습니다.
예:

<input ref={myRef} />

이제 ref.current이 입력 요소를 참조합니다.
폼에서 사용자 이름을 가져오려면 ref를 사용하십시오.

function UsernameForm() {
  const usernameInputRef = React.useRef()

  function handleSubmit(event) {
    event.preventDefault()
    // usernameInputRef.current.value will have the value of the input
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="usernameInput">Username:</label>
        <input id="usernameInput" type="text" ref={usernameInputRef} />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

useRef - official docs을 통해 참고 문헌에 대한 정보를 더 많이 알 수 있습니다.

useState 사용

이것은 React에서 폼을 처리하는 데 가장 자주 사용하는 방법입니다.
입력 값을 상태 변수에 저장한 다음 입력에 myRef.current 프로세서를 추가하여 상태 변수를 업데이트합니다.
React에는 상태를 처리하는 데 사용할 수 있는 onChange이라는 특수 함수가 있습니다.그것은 두 개의 값으로 구성된 그룹을 되돌려줍니다.

상태의 값

상태값 업데이트 함수

주:

useState은 상태의 초기 값을 단일 매개 변수로 사용합니다.

예:

const [count, setCount] = useState(0)

여기 useState 보유 상태치입니다.

count은 setCount의 값을 업데이트할 수 있는 함수입니다.

count은 0의 초기값입니다.

그것으로 표를 처리합시다.

function UsernameForm() {
  const [username, setUsername] = useState('')

  function handleSubmit(event) {
    event.preventDefault()
    // 'username' will have the value of the input
  }
  function handleChange(event) {
    setUsername(event.target.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="usernameInput">Username:</label>
        <input 
            id="usernameInput" 
            value={username} 
            type="text" 
            onChange={handleChange} 
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

주:

우리가 count을 사용하여 응용 프로그램의 상태를 정상 변수가 아닌 처리하는 이유는 우리가 상태를 유지하는 정상 변수가 있다면, 그것을 변경하면 구성 요소가 다시 시작되지 않기 때문이다.따라서 값이 바뀌어도 우리는 변화를 볼 수 없다.단, useState에서 얻은 함수를 사용하여 상태를 업데이트하면, React는 프로그램의 상태가 변경되었음을 알고, 자동으로 구성 요소를 다시 시작합니다.

우리는 뒤의 글에서 useState 갈고리를 더욱 상세하게 이해할 것이다.

이런 유형의 입력, 그 중에서 입력 값은 useState 속성 설정을 통해 value 이벤트 처리 프로그램을 사용하여 이 값의 업데이트를 처리합니다. 이를 onChange이라고 합니다.

official docs을 통해 React에서 폼을 처리하는 것에 대한 더 많은 정보를 얻을 수 있습니다.

다음은 무엇입니까

이것은 우리가 React 기초 지식을 배우는 마지막 문장이다.이 시리즈의 다음 글은 React의 서로 다른 연결을 소개할 것입니다.

다음까지👋

만약 이것이 당신에게 도움이 된다면, 다른 사람에게도 전해질 수 있도록 좋아하고 나누세요.나의 최신 글에 대한 이메일 알림을 받으려면 페이지 맨 위에 있는 구독 단추를 누르면 my blog에 구독할 수 있습니다.너도 트위터에서 나를 팔로우할 수 있다.