ReactJS 준비해보자! (ES6 in React.)

💡모던 자바스크립트 ES6 문법 중 React.js에서 자주 사용되는 몇 가지를 소개합니다.

1. 🔎화살표 함수 (Arrow Functions)

   함수 표현을 간결하게 만들어줍니다.

    const myFunction = (param) => {
      // 함수 내용
    };

2. 🔎템플릿 리터럴 (Template Literals):

   문자열 내에서 변수를 쉽게 삽입할 수 있습니다.

	const message = `Hello, ${name}!`;

3. 🔎비구조화 할당 (Destructuring Assignment)

   객체나 배열의 값을 추출하여 변수로 사용할 수 있습니다.

	const { prop1, prop2 } = this.props;

4. 🔎화면 출력을 위한 JSX 문법

   JavaScript와 HTML을 함께 사용하여 컴포넌트의 UI를 작성합니다.

	return <div>Hello, {name}!</div>;

5. 🔎이벤트 핸들링

   JSX 내부에서 이벤트 핸들러를 등록하고, 화살표 함수를 사용하여 이벤트 처리 로직을 작성할 수 있습니다.

    <button onClick={() => this.handleClick()}>Click me</button>

6. 🔎펼침 연산자 (Spread Operator)

   배열이나 객체를 확장하거나 병합할 때 사용됩니다.

    const newArray = [...oldArray, newItem];
    const newObject = { ...oldObject, newProperty: value };

7. 🔎클래스 (Classes)

   컴포넌트를 만들 때 사용되며, 상태(state)와 라이프사이클 메서드를 관리할 수 있습니다.

    class MyComponent extends React.Component {
      // 컴포넌트 내용
    }

8. 🔎맵(Map)과 필터(Filter)

   배열의 요소를 변환하거나 조건에 맞게 걸러내는데 사용됩니다.

    const doubledNumbers = numbers.map(num => num * 2);
    const evenNumbers = numbers.filter(num => num % 2 === 0);

9. 🔎리스트와 키 (Lists and Keys)

   map 함수를 사용하여 리스트를 렌더링하고, 각 요소에 고유한 키를 제공하여 React에 업데이트를 최적화합니다.

    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>

10. 🔎비동기 처리 - async/await

    비동기 작업을 보다 간결하게 처리할 수 있는 async 함수와 await 키워드를 사용합니다.

    async function fetchData() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

11. 🔎프로미스 (Promises)

    비동기 작업을 다루는데 도움이 되며, async/await와 함께 사용할 수 있습니다.

  fetchData()
    .then(data => {
      // 데이터 처리
    })
    .catch(error => {
      // 에러 처리
    });

12. 🔎모듈 (Modules)

    코드를 여러 파일로 나누고, import와 export 키워드를 사용하여 모듈 간에 데이터 및 함수를 공유할 수 있습니다.

    // 다른 파일에서 내보낸 것을 가져옴
    import { functionName } from './myModule';

이상으로 가장 기본적으로 사용되는 문법에 대해서 알아보았습니다.😁