[React] 리액트 설치 및 실행, js파일 및 css 파일 리액트 연결, Hook, 리스트 렌더링

1. 리액트 설치 및 실행

$npm install -g create-react-app
$npx create-react-app react-practice

• 리액트를 react-practice 폴더에 설치한다.

$cd react-practice
$npm start

• react-practice 폴더로 디렉터리 이동한다.
• react를 실행한다.
• 자동으로 http://localhost:3000/ 에 접속한다.
• 새로운 프로젝트를 시작하려면 $npx create-react-app react-practice2 와 같이 새로운 디렉토리에 react를 설치해줘야한다.(Node.js, express와 비슷함)

 

 

• 리액트 튜토리얼 시작하기 이론 링크 : https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html

 

2. js파일 및 css 파일 리액트 연결 예제

//App.js 코드
import './App.css';
import Header from './components/Header.js'
import Slide from './components/Slide.js'
import Contents from './components/Contents.js'
import Footer from './components/Footer.js'


function App(){
  return(
    <div id="wrap">
      <Header/>
      <Slide/>
      <Contents/>
      <Footer/>
    </div>
  );
}

export default App;

• js 파일은 export default 값에 실행할 함수명을 넣어야 값이 전달된다.
• 콘솔창에 $npm start로 http://localhost:3000/ 브라우저 창을 열어 리액트를 실행하면 App.js파일이 열린다.
• JSX 구문에서 <Header/>는 Header 컴포넌트를 사용하여 해당 위치에 컴포넌트를 렌더링하라는 의미다.
• JSX는 JavaScript 코드 안에서 XML/HTML 구문을 사용할 수 있게 한다.

<!--App.css 코드-->
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

#wrap{
    width: 1200px;
    height: 700px;
    background-color: bisque;
}

//Contents.js 코드
import '../css/Contents.css';

function Contents(){
    return(
        <div id='contents'>
            컨텐츠
        </div>
    );
}

export default Contents;

/*Contents.css 코드*/
#contents{
    width: 1200px;
    height: 200px;
    background-color: royalblue;
}

 

 

 

3. 클래스를 사용해 렌더링 하는 예제 코드

//App.js 코드
import { Component } from 'react'; // React 라이브러리에서 Component 클래스를 임포트

// App 클래스 컴포넌트 정의, Component 클래스를 상속받음
class App extends Component {
  // 생성자 함수, props를 인자로 받음
  constructor(props) {
    super(props); // 상위 클래스인 Component의 생성자를 호출
    // 컴포넌트의 초기 상태를 설정
    this.state = {
      num: 0 // num 상태 값 초기화
    };
  }

  // increase 메서드, num 상태 값을 1 증가시킴
  increase = () => {
    this.setState({
      num: this.state.num + 1 // 현재 num 값에 1을 더한 값을 새로운 상태로 설정
    });
  }

  // decrease 메서드, num 상태 값을 1 감소시킴
  decrease = () => {
    this.setState({
      num: this.state.num - 1 // 현재 num 값에 1을 뺀 값을 새로운 상태로 설정
    });
  }

  // 화면을 그리는 render 메서드
  render() {
    console.log('render'); // render 메서드가 호출될 때마다 콘솔에 로그를 출력
    return (
      <div id='app'> {/* 최상위 div 요소, id는 'app' */}
        <h1>{this.state.num}</h1> {/* 상태 값 num을 화면에 표시 */}
        <button onClick={this.increase}>+</button> {/* increase 메서드를 호출하는 버튼 */}
        <button onClick={this.decrease}>-</button> {/* decrease 메서드를 호출하는 버튼 */}
      </div>
    );
  }
}

export default App; // App 컴포넌트를 기본으로 내보냄

 

 

4. Hook을 이용해 렌더링하는 예제 코드

//App.js 코드
import './App.css'; // CSS 파일 임포트
import { useState } from 'react'; // React에서 useState Hook을 임포트

function App() {
  // useState Hook을 사용하여 상태 변수 num과 상태를 갱신하는 함수 setNum을 정의, 초기 값은 0
  const [num, setNum] = useState(0);

  // 컴포넌트가 렌더링하는 JSX 반환
  return (
    <div className="App"> {/* 최상위 div 요소, 클래스 이름은 'App' */}
      <h1>{num}</h1> {/* 상태 변수 num의 값을 화면에 표시 */}
      <button onClick={() => setNum(num + 1)}>+</button> {/* 클릭 시 setNum을 호출하여 num 값을 1 증가 */}
      <button onClick={() => setNum(num - 1)}>-</button> {/* 클릭 시 setNum을 호출하여 num 값을 1 감소 */}
    </div>
  );
}

export default App; // App 컴포넌트를 기본으로 내보냄

• Hook을 사용하면 클래스를 사용하지 않아도 상태 관리를 할 수 있다.
• 코드가 짧아 가독성이 좋다.

4.1 Hook

Hook에 대한 설명

React Hook은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수입니다. Hook을 사용하면 클래스형 컴포넌트가 아닌 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트 관리를 할 수 있습니다. React 16.8부터 도입되었습니다. 주요 Hook에는 다음과 같은 것들이 있습니다:

• useState:
  • 상태 변수를 선언하고, 해당 상태를 갱신하는 함수를 반환합니다.
  • 사용 예:

const [count, setCount] = useState(0);

• useEffect:
  • 컴포넌트가 렌더링될 때와 상태나 props가 변경될 때 사이드 이펙트를 수행할 수 있게 해줍니다.
  • 사용 예:

useEffect(() => {
  // 수행할 작업
}, [dependencyArray]);

• useContext:
  • Context API를 사용하여 전역 상태를 관리할 때 유용합니다.
  • 사용 예:

const value = useContext(MyContext);

• useReducer:
  • 복잡한 상태 로직을 처리할 때 유용합니다. 리듀서 패턴을 사용하여 상태를 관리합니다.
  • 사용 예:

const [state, dispatch] = useReducer(reducer, initialState);

• useRef:
  • DOM 요소나 변수의 참조를 관리할 때 사용합니다.
  • 사용 예:

const myRef = useRef(null);

 

 

5.  리스트 렌더링 예제 코드

//App.js 코드
import { Component } from 'react'; // React 라이브러리에서 Component 클래스를 임포트
import './App.css'; // CSS 파일 임포트
import Person from './components/Person.js'; // Person 컴포넌트를 임포트

// App 클래스 컴포넌트를 정의, Component 클래스를 상속받음
class App extends Component {
  // 생성자 함수, props를 인자로 받음
  constructor(props) {
    super(props); // 상위 클래스인 Component의 생성자를 호출
    // 컴포넌트의 초기 상태를 설정
    this.state = {
      // personList 상태 변수 초기화, 여러 사람의 정보 객체 배열로 설정
      personList: [
        { id: 1, name: '이민호', age: 20 },
        { id: 2, name: '정채연', age: 21 },
        { id: 3, name: '송중기', age: 22 }
      ]
    };
  }

  // 화면을 그리는 render 메서드
  render() {
    // personList 배열의 각 요소를 순회하면서 Person 컴포넌트를 생성
    const result = this.state.personList.map(
      (data) => (<Person key={data.id} name={data.name} />) // 각 Person 컴포넌트에 key와 name 속성을 전달
    );

    // 컴포넌트가 렌더링하는 JSX 반환
    return (
      <div id='app'> {/* 최상위 div 요소, id는 'app' */}
        {result} {/* Person 컴포넌트들의 배열을 렌더링 */}
      </div>
    );
  }
}

export default App; // App 컴포넌트를 기본으로 내보냄

/*App.css*/
*{
  margin: 0;
  padding: 0;
}

#app{
  width:150px;
  height: 300px;
  background-color: lightgrey;
  margin:0 auto;
}

//Person.js 코드
import '../css/Person.css'

function Person(props){
    return(
        <div id='person'>
            <div>
                이름: {props.name}
            </div>                
        </div>
    )
}

export default Person;

/*Person.css 코드*/
#person{
    width: 100px;
    height: 100px;
    background-color: royalblue;
}