WINK-(Web & App)/React.js 스터디

[2025 겨울방학 React.js 스터디] 박현빈 # 1주차

phb602 2025. 1. 18. 19:05
반응형

리액트가 만들어진 이유

  1. 리액트 등장 이전 DOM의 문제점
    • 이벤트와 상태 변화가 많아질수록 DOM 업데이트 규칙이 복잡해지고 관리가 어려워지며 유지보수가 힘들어짐
  2. 리액트의 독창적 접근과 Virutal DOM
    • 상태 변화시에 DOM 업데이트 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에 시작했다. 하지만, 전체를 새로 렌더링하면 성능이 문제갈 될 수 있다.
    • Virutal DOM을 도입하여 해당 문제를 해결.
    • 실제 DOM 대신 메모리에 존재하는 가상 DOM을 사용하며 상태 변환 시, Virtual DOM에 새 UI를 렌더링하고 실제 DOM과 비교하여 변경된 부분만 업데이트 (선택적 수정이 가능)
    • 이를 통해 성능 문제를 해결하면서도 간단한 개발 환경을 제공.

작업환경 준비

  1. Node.js : Webpack과 Babel 같은 도구를 실행하기 위한 자바스크립트 런타임.(Webpack: 여러 파일로 나뉜 컴포넌트를 하나의 파일로 묶는 역할을 수행. Babel: JSX와 최신 자바스크립트 문법을 브라우저가 이해할 수 있도록 변환하는 역할)
  2. Yarn (선택): npm보다 빠르고 효율적인 패키지 매니저.
  3. Git Bash (윈도우 전용): 터미널 환경 제공
  4. npx create-react-app begin-react 다음 명령어를 실행하는 과정에서 제대로 수행되지 않는다면 node.js 설치 후, Windows 환경 변수에 npm 경로가 등록되지 않아서 npx를 사용할 수 없기 때문에 발생한다. 이를 해결하기 위해서는 환경 변수에 들어가서 C:\Program Files\nodejs\를 직접 추가해 줘야 한다.

React Component

  • 컴포넌트 생성 : Hello.js 파일에 리액트 컴포넌트를 작성
  • import React from 'react'; function Hello() { return
    안녕하세요
    ; } export default Hello;
  • 컴포넌트 사용 : App.js에서 Hello 컴포넌트를 불러와 사용, 여러번 사용할 수 있으면 재사용성이 높다.
  • import React from 'react'; import Hello from './Hello'; function App() { return (
    ); } export default App;
  • 리액트 컴포넌트 렌더링 : 리액트에서 작성한 컴포넌트가 브라우저 화면에 나타나는 것은 ReactDOM.render 가 해당 컴포넌트를 DOM에 "그려주는" 과정 덕분입니다.
  • import React from 'react'; import Hello from './Hello'; function App() { return (
    ); } export default App;

JSX

JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법이다. JS문법을 따른다. JSX가 JS로 제대호 변환이 되려면 지켜주어야 하는 몇가지 규칙이 있다.

  1. 꼭 닫혀야 하는 태그 : 태그 열었으면 반드시 태그를 닫아줘야 한다. HTML에서는 input, br 태그를 사용할 때 닫지 않고 사용하기도 한다. 하지만 리액트에서는 그렇게 하면 안된다.
  2. 태그는 반드시 감싸져야 함 : JSX의 모든 태그는 하나의 부모 태그로 감싸야 한다.
  3. JSX안에 자바 스크립트 값 사용하기 : JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {}으로 감싸써 보여준다.
    import './App.css'; import React from 'react'; import Hello from './Hello'; function App() { const name = "react"; return (
    {name}
    ); } export default App;
  4. Style과 className : JSX에서 태그에 style과 CSS class를 설정하는 방법은 HTML에서 설정하는 방법과 다르다. 인라인 스타일은 객체 형태로 작성해야 하며, background-color 처럼 -로 구분되는 이름들은 backgroundColor처럼 camelCase 형태로 네이밍 해주어야 한다.
  5. 주석 작성 : JSX 내부의 주석은 {/* 이런 형태로 /} 작성합니다.

props를 통해 컴포넌트에게 값 전달

props : props는 properties의 줄임말로서 우리가 어떤 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 간단하게 부모 컴포넌트(APP)에서 자식 컴포넌트(Hello)로 값을 전달할 때 사용한다.

  1. props사용법 : 자식 컴포넌트(Hello)에서 props를 파라미터로 받아 값을 사용한다.
  2. function Hello(props) { return
    안녕하세요 {props.name}
    ; }
  3. 여러 개의 props 및 비구조화 할당 : props에 여러 값을 전달할 수 있으며, 비구조화 할당으로 코드를 간결하게 작성 가능하다.
    • App.js (부모 컴포넌트)
    • function Hello({ color, name }) { return <div style={{ color }}>안녕하세요 {name}
; }
  • Hello.js (자식 컴포넌트)
  • function Hello(props) { return <div style={{ color: props.color }}>안녕하세요 {props.name}