화살표 함수, JSX, 다중클래스 할당, ARIA-LABEL

 

 

() => { }

• 괄호 ()는 함수의 매개변수를 나타냅니다. 여기서는 매개변수가 없으므로 비어있는 괄호입니다.
• 화살표 (=>)는 함수의 정의를 나타냅니다.
• 중괄호 {}는 함수의 본문을 감싸는 블록을 나타냅니다. 이 안에 함수의 동작을 작성할 수 있습니다.

 

const About = () => {

  const { name, role, description, resume, social } = about

  return (

    <div className='about center'>

      {name && (

        <h1>

          Hi, I am <span className='about__name'>{name}.</span>

        </h1>

      )}

      {role && <h2 className='about__role'>A {role}.</h2>}

      <p className='about__desc'>{description && description}</p>

      <div className='about__contact center'>

        {resume && (

          <a href={resume}>

            <span type='button' className='btn btn--outline'>

              Resume

            </span>

          </a>

        )}

        {social && (

          <>

            {social.github && (

              <a

                href={social.github}

                aria-label='github'

                className='link link--icon'

              >

                <GitHubIcon />

              </a>

            )}

            {social.linkedin && (

              <a

                href={social.linkedin}

                aria-label='linkedin'

                className='link link--icon'

              >

                <LinkedInIcon />

              </a>

            )}

          </>

        )}

      </div>

    </div>

  )

}

 

 

const About = () => { }는 이름이 "About"인 화살표 함수를 선언하고 있음

이 함수는 JSX(JavaScript XML) 형식으로 작성된 리액트 컴포넌트를 반환합니다.

JSX는 리액트에서 컴포넌트를 작성하기 위한 문법 확장입니다

 

JSX

 

JSX는 HTML과 유사한 문법을 사용하여 컴포넌트의 UI를 작성합니다.

 

각 HTML 태그는 리액트 컴포넌트로 변환됩니다. 예를 들어, <div>는 div 컴포넌트로, <h1>은 h1 컴포넌트로 변환됩니다.

 

JSX에서 중괄호 {}는 JavaScript 표현식을 삽입하기 위해 사용됩니다.

 

위의 코드에서 중괄호 {}는 조건문과 변수를 사용하여 동적으로 컴포넌트를 렌더링하거나 속성을 설정하는 데 사용됩니다.

 

 

"다중 클래스 할당(Multiple Class Assignment)"

 

 `<div className='about center'>`에서는 `about`와 `center`라는 두 개의 클래스 이름이 적용되었습니다.

 

이는 리액트에서 클래스 이름을 지정할 때 공백으로 구분하여 여러 개의 클래스를 할당할 수 있다는 특징을 활용한 것입니다.

따라서 위의 코드에서 `className='about center'`는 `about` 클래스와 `center` 클래스를 모두 할당하는 것을 의미합니다. 이렇게 여러 개의 클래스를 할당하면 각 클래스에 정의된 스타일을 병합하여 요소에 적용할 수 있습니다.

예를 들어, `about` 클래스에는 `.about` 스타일이 정의되어 있고, `center` 클래스에는 중앙 정렬을 위한 스타일이 정의되어 있을 수 있습니다. 따라서 위의 코드에서는 `<div>` 요소에 `about` 클래스와 `center` 클래스의 스타일이 모두 적용될 것입니다.

이렇게 여러 개의 클래스를 할당하여 사용하는 방식을  "다중 클래스 할당(Multiple Class Assignment)"이라고 합니다.

 

 

"aria-label'

'img태그의 "alt" 와도 비슷한 기능

브라우저에게는 전달이 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용하는 게 aria-label