[2025 1학기 React.js 스터디] 이종민 #3주차

 

리엑트가 만들어진 이유

숙련된 JavaScript 개발자라면, 코드를 최대한 깔끔하게 정리하여 쉽게 유지보수를 할 수도 있겠지만, 대부분의 경우 웹 애플리케이션의 규모가 커지면, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽습니다. 리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었습니다.

우선 src 디렉터리에 Hello.js 파일을 작성했습니다.

export default Hello;

이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미입니다. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용 할 수 있습니다.

Hello 컴포넌트를 App.js 에 불러와서 사용해봤습니다.

우와 ! 안녕하세요가 생겼습니다 !! (신기방기)

이 코드의 ReactDOM.render 의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미합니다. 여기서 id가 root인 DOM을 선택하는데 public/index.html을 열어보면

를 찾을 수 있습니다. 결국, 리액트 컴포넌트가 렌더링 될 때에는, 렌더링된 결과물이 위 div 내부에 렌더링되는 것 입니다.

 

JSX

• 태그는 꼭 닫혀있어야 한다 ! 다른 코드에서 { } 처럼 괄호가 꼭 닫혀있어야 하듯이 태그는 꼭 닫혀있어야한다. HTML 에서는 input 또는 br 태그를 사용 할 때 닫지 않고 사용하기도 한다. 하지만 리엑트에서는 그렇게 하면 안된다. 태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing 태그 라는 것을 사용해야 한다.
• 두개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 한다 !
  

  import React from 'react';
  import Hello from './Hello';
  
  function App() {
    return (
      <Hello />
      <div>안녕히계세요.</div>
    );
  }
  
  export default App;
  

위와 같은 코드는 <Hello /> <div>안녕히계세요.</div> 두개 이상의 태그가 있으나 태그로 감싸져있지 않으므로 오류가 난다.

 

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

export default App;

 

그러므로 이 코드처럼 태그로 묶어줘야한다.

 

리엑트에는 Fragment라는것이 있다. div같은 태그로 묶기 애매할때 사용된다.(ex : 스타일 관련 설정, table 관련 태그를 작성 등등 ..)

 

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

 

태그를 작성 할 때 이름 없이 작성을 하게 되면 Fragment 가 만들어지는데, Fragment 는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

• • JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 { } 으로 감싸서 보여준다 !
• style 과 className
  JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다르다. backgroundColor 처럼 camelCase 형태로 사용해야 한다.
  
  

backgroundColor : camelCase 형태

{ } 를 사용하여 js 변수 사용

CSS class를 설정 할 때에는 class=이 아닌 className= 으로 설정 해줘야 한다.

• 주석

{/*이런 형태나*/}
//이런 형태로 사용됨

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

props 는 properties 의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다.

• props 의 기본 사용법
  

1번 코드 : App 컴포넌트에서 Hello 컴포넌트를 사용할때 name이라는 값을 전달

2번 코드 : 컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있다. props 는 객체 형태로 전달되며, name 값을 조회하려면 props.name을 조회하면 된다.

• 여러개의 props, 비구조화 할당
  
  

props 내부의 값을 조회 할 때마다 props 를 입력하고 있는데, 함수의 파라미터에서 비구조화 할당 문법을 사용하면 조금 더 코드를 간결하게 작성 할 수 있다.

• defaultProps 로 기본값 설정
  컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.
  
  

• props.children
  컴포넌트 태그 사이에 넣은 값을 조회하고 싶을땐, props.children 을 조회하면 된다.

 

조건부 렌더링

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다.

true는 자바스크립트 값이기 때문에 중괄호를 사용

isSpecial 값이 true 라면 <b>*</b>를, 그렇지 않다면 null을 출력한다.

JSX 에서 null, false, undefined 를 렌더링하게 된다면 아무것도 나타나지 않는다.

useState 를 통해 컴포넌트에서 바뀌는 값 관리하기

useState 라는 함수를 불러와준다.

const [number, setNumber] = useState(0);

첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수다.

실제로 값이 바뀌는것을 알 수 있다 !

input 상태 관리하기

useState를 사용합니다. 이벤트 객체 e 를 파라미터로 받아와서 사용할 수 있는데 e.target은 이벤트가 발생한 DOM인 input DOM을 가르키게된다. e.target.value를 조회하면 현재 input에 입력한 값이 무엇인지 알 수 있다.

여러개의 input 상태 관리하기

우선 여러개의 input을 만들어준다.

useState를 여러번 사용하고 onChange 도 여러개 만들어서 구현할 수 있지만 좋은 방법이 아니다. input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는것이 더 좋은 방법이다. useState는 객체 형태의 상태를 관리해준다.

리엑트에서 객체를 수정할때는 아래처럼 수정하면 안된다.

inputs[name] = value;

대신 스프레드 연산자를 사용하여 바꾸어준다.

setInputs({
  ...inputs,
  [name]: value
});

불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행된다.