[4주차 - 1] React.js 입문

실습 준비

리액트 앱 생성 -npm install, npm run dev로 dependencies 설치

 

App.jsx 파일

App.jsx 수정

리액트 앱 생성 후 실습에 불필요한 부분 삭제
-  react.svg 와 vite.svg 파일 삭제 후 App.jsx의 임포트문 삭제
(임포트문을 삭제하지 않으면 브라우저 창에서 오류 발생)
- useState문 삭제 후 회색으로 변한 임포트문 삭제
(함수를 불러와도 사용되지 않으면 회색으로 표시됨)
- App내부의 div문 모두 삭제

 

App.css, index.css

- 코드 전체 삭제 (ctrl + a)

 

Main.jsx

- react-strict-mode 삭제

(개발 모드로 리액트 앱을 실행하고 있을 때 작성한 코드에 잠재적 문제가 있는지 내부적으로 검사하는 기능)

 

.eslintrc.cjs (ESLint의 옵션을 설정하는 파일)

- extension에서 ESLint 설치

- 36, 37라인 추가 (초보자 기준 혼란 발생 우려하여 추가)

no-unused-vars: 코드상에 실제로 사용하지 않는 변수가 있을 때 오류로 알려주는 옵션
react/prop-types: 리액트를 더 안전하게 사용할 수 있는 옵션

---

컴포넌트(component)

: HTML 태그들을 반환하는 함수

- 컴포넌트를 부를 때 함수의 이름을 따서 부름
- 클래스보단 함수로 컴포넌트를 작성하는 방식이 일반적임 (클래스 사용 시 작성 코드의 분량이 많아짐)
- 컴퍼넌트를 생성하는 첫 글자는 대문자를 사용해야 함

Header는 App의 자식 컴포넌트

- Header 컴포넌트만 작성하면 렌더링되지 않음

main.jsx 파일에ㅔ서 App 컴포넌트만 렌더링하고 있기 때문에 App컴포넌트에서 Header를 반환해야 렌더링이 된다

- App 컴포넌트는 Root Component (컴포넌트들의 조상)

- Hello를 render 함수 안에 넣으면 페이지에 Hello의 리턴값을 페이지에 렌더링한다

- 하지만 일반적으로 App을 사용한다

 

컴포넌트 실습 준비

리액트 앱 생성 -npm install, npm run dev로 dependencies 설치

 

 

 

App.jsx 파일

 



App.jsx 수정

리액트 앱 생성 후 실습에 불필요한 부분 삭제

- react.svg 와 vite.svg 파일 삭제 후 App.jsx의 임포트문 삭제

(임포트문을 삭제하지 않으면 브라우저 창에서 오류 발생)

- useState문 삭제 후 회색으로 변한 임포트문 삭제

(함수를 불러와도 사용되지 않으면 회색으로 표시됨)

- App내부의 div문 모두 삭제

 

 

 

App.css, index.css

 

- 코드 전체 삭제 (ctrl + a)

 

 

 

Main.jsx

 

- react-strict-mode 삭제

 

(개발 모드로 리액트 앱을 실행하고 있을 때 작성한 코드에 잠재적 문제가 있는지 내부적으로 검사하는 기능)

 

 

 

.eslintrc.cjs (ESLint의 옵션을 설정하는 파일)

 

- extension에서 ESLint 설치

 



- 36, 37라인 추가 (초보자 기준 혼란 발생 우려하여 추가)

 

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

react/prop-types: 리액트를 더 안전하게 사용할 수 있는 옵션

 

컴포넌트(component)

: HTML 태그들을 반환하는 함수

 

- 컴포넌트를 부를 때 함수의 이름을 따서 부름

- 클래스보단 함수로 컴포넌트를 작성하는 방식이 일반적임 (클래스 사용 시 작성 코드의 분량이 많아짐)

- 컴퍼넌트를 생성하는 첫 글자는 대문자를 사용해야 함

 



Header는 App의 자식 컴포넌트

- Header 컴포넌트만 작성하면 렌더링되지 않음

 

main.jsx 파일에ㅔ서 App 컴포넌트만 렌더링하고 있기 때문에 App컴포넌트에서 Header를 반환해야 렌더링이 된다

 

- App 컴포넌트는 Root Component (컴포넌트들의 조상)

 



- Hello를 render 함수 안에 넣으면 페이지에 Hello의 리턴값을 페이지에 렌더링한다

 

- 하지만 일반적으로 App을 사용한다

 

 

 

컴포넌트 모듈화

- component 폴더 생성 후 컴포넌트 작성, ESM으로 내보낸다

Main, Footer 추가

- vite로 만든 리액트 앱은 내부적으로 파일을 찾아가도록 설정되어 있기 때문에 확장자 표기는 필수가 아님

---

JSX(JavaSpcript Extension)

: 확장된 자바스크립트의 문법

- 중괄호 안에 JavaScript 식을 넣어서 JSX 내에서 렌더링 할 수 있다
- 중괄호 안에 문자열, 배열 등의 다양한 데이터 타입도 포함시켜서 페이지에 출력할 수 있다

 

JSX 주의사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다
(자바스크립트 표현식: 삼항 연산자나 변수의 이름처럼 특정 값으로 평가될 수 있는 코드)
 - if나 for문과 같은 제어문 사용불가

2.숫자, 문자열 또는 배열의 값만  렌더링된다
- boolean, null 등의 데이터 형식은 아무것도 출력되지 않는다
- 객체 자체를 렌더링 시도하면 오류로 인해 페이지가 백지화된다
점 표기법(예: obj.a)을 사용해 숫자 값을 렌더링하자

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

(예: <img></img>)

4. 최상위 태그는 반드시 하나여야만 한다

- main위에 div를 최상위 태그로 올려서 오류 발생

- 적절한 메인 태그가 없으면 빈괄호<>를 사용하면 된다

 

조건문에 따라 렌더링하기

// 삼항연산자 사용
const Main = () => {
    const user = {
        name: "이정환",
        isLogin: false,
    };

    return (
        <>
            {user.isLogin ? (<div>로그아웃</div>) : (<div>로그인</div>)}
        </>		// isLogin의 값에 따라 렌더링 문구가 달라짐
    );
};

// if문 사용
const Main = () => {
    const user = {
        name: "이정환",
        isLogin: false,
    };

    if (user.isLogin) {
        return <div>로그아웃</div>;
    }
    else {return <div>로그인</div>;
    }
};

 

DOM요소에 스타일 적용하기

1. 직접 스타일 속성을 설정하는 방법

- 중괄호를 두 번 열어주고, style을 적어주면 된다
- return문 안에 스타일링 코드가 많아지면 가독성이 떨어진다
- CSS처럼 '-'를 쓰지않고 카멜스타일을 사용
border-bottom(X) ,borderBottom(O)

 

2. 별도의 CSS파일을 만들어 적용하는 방법
- 메인 컴포넌트를 위한 CSS파일을 하나 만든다

// Main.css 파일

.logout {
    background-color: red;
    border-bottom: 5px solid  green;
}

// Main.jsx 파일에서 css파일 임포트

import "./Main.css";

const Main = () => {
    const user = {
        name: "이정환",
        isLogin: false,
    };

    if (user.isLogin) {
        return <div className="logout">로그아웃</div>;
    }
    else {return <div>로그인</div>;
    }
};

- div요소에 css스타일을 적용하기 위해 className="logout"을 쓴다
- HTML에서는 class지만 JSX는 JS+HTML이므로 className을 사용한다

---

Props

네이버의 헤더 구현 시, 버튼을 렌더링하는 버튼 컴포넌트를 만들어서 이미지와 텍스트를 만들려고 함

- 리액트에서는 부모 컴포넌트가 자식 컴포넌트에게 값 전달이 가능하다 (like 함수의 인수)
이때 컴포넌트에 전달된 값들을 Props라고 한다

 

Props 활용하기

// Button.jsx 파일 생성

// 객체의 구조분해 문법을 활용하여 속성값을 바로 가져옴
// 자식요소는 자동으로 children props에 전달
const Button = ({text, color, children}) => {
    return (
        <button style={{color: color}}>
         {text} - {color.toUpperCase()}
        </button>
    );
};

// 디폴트값을 설정하여 undefined 오류 방지
Button.defaultProps = {
    color: "black",
};

export default Button;

- 부모 컴포넌트에서 전달받은 값을 props로 불러온다

- props로 어떠한 값이 반드시 전달될 거라고 예상하고 코드를 작성하는 건 위험 (예: props.color.toUpperCase)
color를 설정 안 한 상태(undefined)에서 점 표기법으로 메서드 호출 시 오류 발생

// App.jsx 파일

import Button from './components/Button';

function App() {
  const buttonProps ={    // 값이 많으면 객체로 따로 빼주기
    text: "메일",         // return에서 스프레드 연산자로 props 불러옴
    color: "red", 
    a: 1,
    b: 2,
    c: 3,
  };
  return (
    <> 
      <Button {...buttonProps} />   
      <Button text={"카페"} />	
      <Button text={"블로그"} />
    </>
  );
};

export default App;

 

- 부모 컴포넌트가 자식에게 props 전달 가능 (역은 불가능)

---

이벤트 핸들링(Event Handling)

: 이벤트가 발생했을 때 그것을 처리하는 것

const Button = ({text, color, children}) => {
    // 이벤트 객체
    const onClickButton = (e) => {
        console.log(e);    // 이벤트 객체 출력 
        console.log(text);
    }

    return (
        <button>
            onClick={onClickButton}  
            onMouseEnter={onClickButton}
        </button>
    )
};

- 함수의 결과가 아닌 함수 이름만 핸들러로 설정해야 한다 (onClickButton)
- 이벤트 함수를 호출하면서 매개 변수로 이벤트 객체라는 것을 제공한다 (e)

 

- 이벤트 객체 출력시 SyntheticBaseEvent(=합성이벤트객체)가 나온다
* 합성 이벤트 객체: 모든 브라우저의 이벤트를 하나의 포맷으로 통일하는 형태, 이벤트와 관련된 모든 정보가 들어있음

 

브라우저 별 타겟이 모두 달라서 호환성을 따져야하는 문제 발생

타겟(target): 이벤트 객체에 이벤트가 현재 발생한 요소를 가져오는 속성

 

But, 합성이벤트객체가 Cross Browsing Issue를 해결해준다
브라우저 별 다른 규격을 통일된 규격으로 이벤트 객체를 포맷팅해줌으로써 이슈 해결
>> 리액트 개발 시 브라우저의 종류 신경쓰지 않아도 됨