3주차 (2024.10.14)

ReactJS 입문 1

1. 실습 설정

이전 주차의 5.1을 참고하여 리액트 앱 생성 후 각종 불필요한 파일들을 먼저 제거해준다.

불필요한 항목

• App.jsx의 (2&3), (1&7) 라인
        import reactLogo from './assets/react.svg'

        import viteLogo from '/vite.svg'
  + 사진 파일들도 함께 제거
        import { useState } from 'react' 

        const [count, setCount] = useState(0)
• App.jsx가 return 하고 있는 빈 태그 속의 모든 라인
• App.css의 전체 내용
• index.css의 전체 내용
• main.jsx의 1&7&9 라인
        import { StrictMode } from 'react'
        <StrictMode>
        </StrictMode>,

이후, 리액트의 실습을 도와줄 수 있는 도구 ESLint를 설치해준다.

ESLint: 작성하는 코드를 정적으로 검사하여 오류가 발생할 만한 코드가 있다면 경고를 띄워주는 프로그램

.eslintrc.cjs 파일을 통해 나머지 옵션들을 추가적으로 설정한다. rules:라고 명시되어 있는 부분에 ˚"no-unused-vars":"off",와 ˚"react/prop-types":"off", 라인을 추가해 간단한 실습중에는 불편하게 만들 수 있어 Off로 꺼두도록 설정해 준다. 

˚"no-unused-vars":"off": 코드상에 실제로 사용하지 않는 변수가 있을 때 오류로 알려주는 옵션

˚"react/prop-types":"off": React를 좀 더 안전하게 사용할 수 있도록 해주는 옵션

 

 

 

2. React Component

React에서 Component란 JavaScript 함수가 html 태그를 반환하도록 설정할 수 있는 함수

1) App.jsx 파일에 컴포넌트 생성

App.jsx 파일에 헤더 태그를 반환하는 헤더 컴포넌트 생성

function Header(){   return (     <header>       <h1>header</h1>     </header>   ); }

const Header = () => {   return (     <header>       <h1>header</h1>     </header>   ); }

함수가 아닌 클래스를 이용해서도 컴포넌트를 만들 수 있으나 클래스를 이용할 경우 직접 작성해야 하는 코드의 양이 증가한다. 따라서 클래스가 아닌 함수를 이용해 컴포넌트를 만드는 것이 더 일반적이고 대중적이다.

! 주의할 점 !

! 컴포넌트를 생성하는 함수의 이름은 반드시 첫 글자가 대문자이어야 된다.

 

2) 컴포넌트 화면에 렌더링

생성한 컴포넌트 함수 이름을 App.jsx 속 App 컴포넌트의 return문 안에 <(컴포넌트명) />를 배치한다.

App 컴포넌트만이 main.jsx에 렌더링 되어있기 때문이다. 이렇게, Header 컴포넌트처럼 다른 컴포넌트의 리턴문 내부에 포함되는 컴포넌트를 자식 컴포넌트라 하고 App 컴포넌트를 부모 컴포넌트라 한다. 모든 리액트 컴포넌트들의 최상위, 조상 역할을 하는 컴포넌트를 root 컴포넌트라 한다.

컴포넌트들이 많아질 경우, 기본 App.jsx 파일에 컴포넌트 함수를 생성하는 것이 아닌 METHOD 2와 같이 src 폴더 아래 새로운 폴더를 만들어 각 컴포넌트를 파일별로 정리해 가독성을 높이고 디버깅과 수정 환경을 개선할 수 있다. 

METHOD 1 import './App.css' function Header(){   return (     <header>       <h1>header</h1>     </header>   ); } function App() {   return (     <>       <Header />       <h1>안녕 리액트!</h1>     </>   ) } export default App

METHOD 2

EXAMPLE

 

 

 

3. JSX

JSX(JavaScript Extension)란 말 그대로 확장된 JavaScript의 문법으로 JavaScript 코드 안에 HTML 코드를 삽입하여 두가지 다른 언어를 혼용하여 사용할 수 있도록 한다.

두 언어의 장점을 결합하여 효율적으로 UI를 구성하는 데 도움을 준다. 

JavaScript의 출력값을 화면에 렌더링 할 경우 HTML 형식의 코드에 {}를 넣어 속에 포함시면 된다.

EXAMPLE

! 주의할 점 !

! 중괄호 내부에는 JavaScript 표현식만 넣을 수 있다. if문 또는 for문 등 한 줄로 평가될 수 없는 값은 오류가 발생한다. 

! 숫자, 문자열, 배열 값만 렌더링 된다. boolean, undefined, 또는 null과 같은 값을 사용할 경우 오류는 발생하지 않으나 화면에 렌더링 되지 않는다. 객체형을 입력할 경우, 오류가 발생해 브라우저 화면이 백지로 바뀌게 되므로 해당 객체를 유효한 자식 요소로 변환하여 입력해야 한다.

! 모든 태그는 닫혀있어야 한다. 

! 최상위 태그는 하나여야 한다. 여러가지 태그도 안 될 뿐더러 만약 적절한 최상위 태그가 없을 경우에는 <></>의 빈 태그로 묶어주어도 된다.

 

3.1. DOM 요소에 스타일 적용하는 방법

• 요소에 직접 스타일 속성 설정

JSX 파일 속 요소에 직접 설정할 경우 css 문법이 아닌 JSX 규칙인 Camel Case(카멜 표기법)을 따라야한다. 예를 들어, background-color이 아닌 backgroundColor처럼 -를 생략하고 연결된 단어의 첫 글자를 대문자로 써줘야한다.

• 별도의 CSS 파일을 생성해 스타일 속성 설정

EXAMPLE

JavaScript의 예약어인 class를 사용할 수 없기 때문에 기존 형식인 class=""가 아니라 className이라는 속성으로 설정한다. 

 

 

4. Props

Props란 부모 컴포넌트가 자식 컴포넌트들에게 전달한 값들이다.

 

 

 

5. 이벤트 헨들링

˚이벤트 헨들링이란 웹에서 이벤트가 발생했을 때 그것을 처리하는 것을 뜻한다.

˚이벤트: 웹페이지 내부에서 발생하는 사용자의 모든 행동

const Button = (props) =>{

    const onClickButton = (e) => {

        console.log(e);

        console.log(props.text);

    }

    console.log(props);

    return <button

    onClick = {onClickButton}

    style={{color: props.color }}>

        {props.text} - {props.color.toUpperCase()}

        {props.children}

    </button>;

};

Button.defaultProps = {

    color : "black"

}

export default Button;

onClick: 클릭 이벤트가 발생하였을 때 다음의 함수를 실행하라라는 함수

onMouseEnter: 마우스를 롤오버했을 때 발생하는 함수

synthetic Base Event(합성 이벤트)란 브라우저 별 스펙이 달라 발생하는 cross browsing issue를 해결해주는 역할로 모든 브라우저에서의 이벤트 객체를 하나로 통일한 형태를 의미한다.

 

 

---

 

 

++ (스터디 후 추가 노트)

4. Props 부분에서 toUpperCase()와 같은 함수를 시행할 때 에러를 방지하기 위하여 props decault 값을 설정할 수 있으나 이는 권장하지 않는다.

개발자 도구에서  함수형 컴포넌트에서 더이상 defaultProps를 지원하지 않을 것이라는 경고문을 확인할 수 있다. 

이를 대신하여 디스트럭처링 문법을 사용해서 props default 값을 설정할 수 있다.