React 기초 정리

회사에서 react를 이용해서 project를 진행하게 되었다 ..

이 전에 react를 써본 경험이 거의 없어서,, (Vue.js 만 조금 써봤다) 

이번 기회에 react에 대해 간단히 정리해 보려고 한다.

 

1. React 란?

React는 컴포넌트 기반의 JavaScript 라이브러리로, UI를 효율적으로 관리할 수 있도록 도와줌

      

      

      

    
    

      <bash />
    
# Node.js 설치

# install react.js
npm install -g create-react-app

# create project
create-react-app my-app

# run
cd my-app npm start

 

1.1. Component

• 재사용 가능한 UI 조각으로, 독립적으로 동작하며 다른 컴포넌트와 결합하여 복잡한 UI를 구성함
• ex) 버튼이나 폼 같은 UI 요소를 컴포넌트로 만들고, 이를 여러 곳에서 재사용할 수 있음

 

1.2. Props (Properties)

• 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식
• props는 읽기 전용이며, 컴포넌트 외부에서 전달된 데이터를 받아 UI에 반영함
• props를 통해 부모 컴포넌트는 자식 컴포넌트의 동작이나 외형을 제어할 수 있음

 

1.3. State (상태)

• 컴포넌트가 관리하는 데이터로, 사용자와의 상호작용에 따라 변경될 수 있는 값을 저장함
• props와 달리 state는 컴포넌트 내부에서만 관리되며, 상태가 변경되면 해당 컴포넌트가 자동으로 다시 렌더링됨
• React에서 state는 주로 useState 훅을 사용하여 관리함

      

      

      

    
    

      <javascript />
    
   function Counter() {
     const [count, setCount] = useState(0);
     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>Click me</button>
       </div>
     );
   }

 

1.4. Virtual DOM

• React는 Virtual DOM을 사용하여 성능을 최적화 함
• Virtual DOM은 실제 DOM과 유사한 구조로, 컴포넌트 업데이트 시 변경된 부분만 실제 DOM에 반영하여 불필요한 DOM 조작을 줄임
• 이로 인해 페이지 로딩 속도와 성능이 향상 됨

 

1.5. Lifecycle Methods (생명주기 메서드)

• React 컴포넌트는 생성, 업데이트, 삭제되는 과정에서 생명주기(Lifecycle) 메서드를 통해 특정 시점에 실행되는 함수를 정의할 수 있음
• 생명주기 메서드를 사용하면 컴포넌트가 화면에 렌더링되기 전, 후 또는 업데이트될 때 필요한 작업을 수행할 수 있음