[항해99] React 입문 주차 기본 개념 #2

김헤일리·2022년 11월 30일
React항해99
0

React

목록 보기
3/10
post-custom-banner

🔑 element(엘리먼트)란?

  • 리액트에서 가장 작은 단위이며, 화면에 표시할 내용을 기술하는 것을 말함
  • 쉽게 생각하면, 엘리먼트는 컴포넌트의 구성 요소이고, 반대로 컴포넌트를 엘리먼트로 구성되어 있다고 생각 할 수 있다
    • 예시
      const element = <h1 hello</h1>;
  • 어떻게 사용할까 ?
    • React 엘리먼트를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 된다.
    • 예시:
      const element = <h1>hello, GodDaeHee!~</h1>;
ReactDOM.render(element, document.getElementById('root'));
    • 위와 같은 원리로 엘리먼트를 생성하고 렌더링 하는데, JSX를 사용한다면 이 작업을 바벨이 편하게 알아서 해석 해주게 된다.

🔑 props란?

  • 프로퍼티, props(properties의 줄임말) 이며, 상위 컴포넌트가 하위 컴포넌트로 값을 전달할때 사용 한다

    • (단방향 흐름 데이터 흐름을 가지며 하위 컴포넌트에서 읽기전용이다)

  • 어떻게 사용할까?

    • 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.
      • props={} , props="" 두가지 형태를 사용한다.

  • 참고할 만한 사용법

    • 프로퍼티의 자료형을 미리 선언할 수 있다.

      • 예시: Main.propTypes = { name: PropTypes.string }

    • 컴포넌트에 props 기본값을 설정하고 싶은 경우 defaultProps를 설정하면 된다.

      • 예시: Main.defaultProps = { name: '디폴트' }

    • 디폴트 설정을 하지 않는 경우 해당 프로퍼티를 필수 프로퍼티로 선언 할 수도 있다.

      • 예시: Main.propTypes = {name: PropTypes.string.isRequired}

🔑 JSX란?

  • HTML도아닌 JSX(JavaScript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다
  • JSX는 React “엘리먼트(element)” 를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다
  • React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다
  • 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다

1. JSX 사용하기

  • 어떤 프레임워크를 사용해 웹앱을 만들든 가장 중요한 것은 최종결과가 HTML, CSS, JS의 조합이어야 한다는 것이다. (그렇지 않으면 브라우저가 이해하지 못하기 때문이다)
  • 리액트로 개발을 할 때 HTML, CSS, JS 코드를 작성하기도 하지만 상당부분을 JSX로 코드를 작성해야한다. 하지만 JSX는 공식적인 JS문법이 아니기 때문에 브라우저는 JSX를 이해하지 못한다. 그래서 리액트로 개발을 할 때는 JSX를 브라우저가 이해할 수 있는 평범한 자바스크립트로 변환시킬 방법이 필요하다.

2. JSX변환방법

  1. Node.js와 그 외 빌드 툴 등으로 구성된 개발환경을 구축하여 리액트로 개발하는 것

    • 빌드 툴을 이용해 JSX로 작성된 코드들이 JS로 변환되며, 다른 일반적인 JS 파일처럼 참조할 수 있도록 변환된 파일이 디스크에 저장된다.
      • 장점 : 오늘날 현대적인 웹개발에서 대표적인 방식, JSX에서 JS로 트랜스 파일됨, 여러 모듈과 빌드 툴 그리고 그 외 복잡한 웹앱의 관리에 필요한 많은 기능 이용 가능
      • 단점 : 처음에는 약간 복잡하고 시간이 걸림

  2. 런타임 시 브라우저가 JSX를 JS로 자동 변환 하게 해주는 방법

    • CDN을 이용하는 방식으로, 일반 JS처럼 JSX를 직접 지정하면 브라우저가 알아서 처리한다. 브라우저가 실행 될 때 CDN으로 연결한 스크립트 파일 하나만 참조하고, 그 스크립트 파일은 페이지가 로딩 될 때 JSX를 JS로 변환한다.
      • 장점 : 개발 환경 세팅 시간을 절약하고 코드 작성에 더 많이 집중 가능
      • 단점 : 브라우저가 매번 JSX를 JS로 변환해야 하는데, 이로 인해 소요되는 시간이 길어지면 브라우저 성능 저하를 야기 할 수 있다. 성능 이슈가 있으므로 실제 웹 개발에서는 사용하지 않음.

3. JSX 장점

  1. 보기 쉽고 익숙하다
    • JSX는 HTML 코드와 비슷하기 때문에 일반 자바스크립만 사용한 코드보다 더 익숙하며 가독성이 좋다.
  2. 높은 활용도
    • JSX에는 div, span 같은 HTML 태그를 사용할 수 있으며, 개발자가 만든 컴포넌트도 JSX 안에서 작성할 수 있다.

4. JSX 특징

  1. 대소문자를 구별한다

    • JSX에서 HTML엘리먼트를 작성할 때는 반드시 소문자를 사용해야 하지만, 컴포넌트를 작성할 때는 컴포넌트 클래스 이름과 동일하게 PascalCase로 작성되어야 한다.

  2. 주입공격을 방지한다

    • 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 처리하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있다.

  3. 객체를 표현한다


5. JSX문법

  1. 반드시 태그는 닫혀야한다

    • <div>, <p>, <span>, <a> 같이 짝이 있는 태그의 경우 반드시 닫는 태그가 존재해야 한다. 그렇지 않을 경우 에러가 발생한다.
    • <img/>, <input/>, <br/> 같은 단독 태그(self-closing tag)의 경우에는 반드시 태그를 닫아줘야 한다. 그렇지 않을 경우 에러가 발생한다.

  2. 렌더링 될 루트 엘리먼트는 하나만 존재해야한다

    • 렌더링 될 리액트 엘리먼트에서 루트 엘리먼트가 두 개 이상일 경우 에러가 발생한다. 때문에 두 개 이상의 루트 엘리먼트가 존재할 경우 반드시 하나의 엘리먼트로 감싸져야 한다.

      • (JSX는 자식 엘리먼트를 가질 수 있다.)

    • Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문에, 리액트에서는 반드시 컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸야 한다.


🔑 state란?

  • state는 일반 자바스크립트 객체고, 함수 내부에 선언된 변수처럼 컴포넌트 내부에서 사용된다

  • 일반적으로 컴포넌트 내부에서 변경이 가능한 데이터를 관리할 때 사용한다.

  • state는 렌더링 되는 결과물에 영향을 미치는 요소 중 하나고, 기본적으로 state에 변경이 생기면 컴포넌트는 리렌더링 된다.

  • state는 사용자와의 interaction이나 네트워크 변경 이벤트의 결과로 변경된다.

  • state 값을 변경하기 위해선 state 자체의 값을 변경하는 것이 아니라 setState() 함수를 사용해서 변경해야한다.


🔑 컴포넌트(Component)란?

  • 리액트로 만들어진 앱을 이루는 최소한의 단위

  • 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. - 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. - 컴포넌트 이름은 항상 대문자로 시작하도록 한다.    (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

  • UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

  • “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

  • props와 state 등의 특징들은 따로 정리 하도록 한다.


1. 함수형 컴포넌트 (Stateless Functional Component)

  • 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다. 

    • 예시의 export는 구문은   작성한 MyComponent 파일을 다른 파일에서 import 할때 MyComponent로 불러올 수 있도록 정의해 주는 부분이다.

    • 여기서 import시 js, jsx 등 파일 확장자를 생략해도 자동으로 찾을 수 있다. 이는 "웹팩 코드 검색 확장자(webpack module resolution)" 기능 때문이다.

      • 확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션(extentions)에 정의된 확장자 목록을 통해 확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트 한다.

ex) import 'Header'; 의 경우 Header.js > Header.jsx 순서로 확인 한다.

import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

2. 클래스형 컴포넌트 ( Class Component )

  • 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다. (리액트 생명주기는 따로 조금더 자세히 알아보도록 한다.)

  • 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

  • 예시:

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

🔑 Hook이란?

  • 기존 리액트는 컴포넌트 재사용이 가능한 로직이 추가되지 않았음. state를 사용하기 위해선 class를 사용해야 했는데, Hook은 함수형 컴포넌트에서도 state를 사용하기 위해 새로 만들어진 개념.

  • 함수형 컴포넌트에서 state를 관리할 경우, 기존 클래스형 컴포넌트보다 코드가 더 간결해지는 효과를 볼 수 있다. 함수형 컴포넌트를 사용할 경우, 기능들을 함수 단위로 분리할 수 있다는 이점이 있기 때문.

  • 리액트는 기본적으로 두 가지의 Hook을 제공한다.

    • useState

      • useState() 함수는 배열을 리턴하도록 설계되어 있다.

      • useState 사용 시, 매개변수 2개를 사용하는데, 첫번째는 state의 값을 상징하고, 두번째는 state를 변경하는 함수다.

        • 기본적으로 const [state, setState] = useState() 형태로 사용한다.

    • useEffect

      • 컴포넌트가 처음 나타낼 때, 사라질 때, 그리고 업데이트 될 때 (특정 props가 변경될때) 등 컴포넌트가 렌더링될 때 특정 작업을 실행하는 Hook이다.

      • useEffect(effect, [, deps]); 형태로 사용되는데, 첫번째 인자(effect)는 함수, 두번째 인자는 배열(deps)이 들어간다.

        • effect는 렌더링 이후 실행될 함수를 의미한다.
        • deps는 특정한 값이 변경될 때, effect함수를 실행 하고 싶을 경우 배열 안에 그 값을 넣어준다.
        • 빈 배열을 입력할 경우 컴포넌트가 처음 실행될 때만 실행 된다.

  • Hook을 사용하기 위한 규칙:

    • Hook은 최상위에서만 호출되어야하고, 호출 순서는 항상 같아야 한다.

      • 리액트는 훅이 사용된 순서로 상태값을 구분한다.

        • 예를 들어 반복문 안에서 Hook을 호출했을 때, 값이 false라면 해당 부분을 건너뛰게 되는데, 이때 Hook의 실행 순서에 문제가 생겨서 오류가 생긴다..

      • 조건문이나 반복문을 사용하고 싶다면 useEffect 내부에서 hook을 사용해야 한다.

    • Hook은 리액트 내부에서만 사용 가능.

      • 일반 자바스크립트 함수에서 hook을 사용할 수 없다.

리액트 입문 주차동안 같은 조에 배정 받으셨던 분들과 같이 팀과제를 진행했다.

각자 키워드를 선택하고 답변을 가져오는 형식이었는데, 덕분에 기초 개념들에 대한 추가 공부 자료가 생겨서 좋다!

내가 작성한 부분도 도움이 됐으면 좋겠다.

profile
김헤일리
공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄
이전 포스트

[React 2] State & Props 간단정리

다음 포스트

[항해99] React 입문 주차 기본 개념

post-custom-banner

0개의 댓글