[React, RN] 리액트 시작하기😀

1. 리액트 소개

리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.

컴포넌트 기반으로 UI를 구성하며, 상태 관리와 데이터 흐름을 효율적으로 처리합니다.

 

2. JSX (JavaScript XML)

JSX는 자바스크립트 코드 안에서 HTML과 비슷한 구문을 사용할 수 있게 해주는 문법입니다.

const element = <h1>Hello, world!</h1>;

 

* JSX는 React.createElement로 변환됩니다.

 

 

3. 컴포넌트 (Component)

리액트에서 UI는 컴포넌트로 나누어 관리됩니다.

컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다.

 

함수형 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

 

 

4. Props (속성)

props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 객체입니다.

props는 읽기 전용이며, 컴포넌트 내부에서 수정할 수 없습니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

 

 

 

5. State (상태)

state는 컴포넌트의 상태를 나타내며, 컴포넌트 내에서 변경될 수 있습니다.

클래스형 컴포넌트에서는 this.state로, 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

 

클래스형 컴포넌트에서의 상태

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

 

 

 

함수형 컴포넌트에서의 상태 (useState 훅)

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

 

6. 이벤트 핸들링

리액트에서는 이벤트 핸들러가 JSX의 속성으로 설정됩니다. 이벤트 핸들러 이름은 camelCase로 작성해야 합니다.

function MyButton() {
  const handleClick = () => {
    alert("Button clicked!");
  };
  return <button onClick={handleClick}>Click me</button>;
}

 

7. 조건부 렌더링

리액트에서 조건부 렌더링을 통해 상태나 props에 따라 UI를 동적으로 업데이트할 수 있습니다.

function LoginButton(props) {
  if (props.isLoggedIn) {
    return <button>Logout</button>;
  }
  return <button>Login</button>;
}

 

8. 리스트와 키 (List and Keys)

리액트에서는 리스트를 렌더링할 때 각 항목에 key 속성을 부여해야 효율적인 업데이트가 가능합니다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return <ul>{listItems}</ul>;
}

 

9. 컴포넌트 라이프사이클 (Lifecycle)

클래스형 컴포넌트에서는 여러 가지 생명주기 메서드를 제공하여 컴포넌트의 생명주기 동안 특정 동작을 실행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component did mount!');
  }

  render() {
    return <div>Hello</div>;
  }
}

 

10. 훅 (Hooks)

함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 리액트의 기능입니다.

useState: 상태 관리

useEffect: 사이드 이펙트 처리

useContext: 컨텍스트 사용

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => setSeconds(seconds + 1), 1000);
    return () => clearInterval(intervalId);
  }, [seconds]);

  return <h1>Time: {seconds}s</h1>;
}

 

 

 

11. 컨텍스트 (Context)

리액트에서 컴포넌트 트리 전역에서 데이터를 전달할 때 Context를 사용합니다.

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  return (
    <ThemeContext.Consumer>
      {theme => <div>The current theme is {theme}</div>}
    </ThemeContext.Consumer>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

 

12. 리액트 라우터 (React Router)

리액트 라우터를 사용하여 페이지 간의 네비게이션을 구현합니다.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

 

마무리

리액트는 효율적인 UI 개발을 위한 강력한 도구로, 자바스크립트 문법과 다양한 기능들이 잘 결합되어 있습니다. 위에서 설명한 문법을 바탕으로 리액트 애플리케이션을 개발하면서 더 많은 기능을 활용할 수 있습니다.