5-13TIL

1. 리액트 프로젝트 셋업 (by Vite)

• Vite를 사용하여 리액트 프로젝트를 빠르게 셋업할 수 있다. Vite는 개발 서버 시작, 핫 모듈 교체(HMR) 등을 제공하여 개발 속도를 향상시킨다.
• 프로젝트를 시작하려면, 터미널에서 npm init vite@latest 명령어를 실행하고, 프로젝트 이름과 프레임워크 선택에서 react를 선택한다.

2. JSX 이해하기

• JSX는 JavaScript를 확장한 문법으로, React에서 UI를 표현하기 위해 사용된다.
• HTML과 비슷하게 생겼지만, 실제로는 JavaScript이다. 따라서 JSX 내에서 JavaScript 표현을 중괄호 {}로 감싸서 사용할 수 있다.

3. useState 동작 간단하게 살펴보기

• useState는 React의 상태 관리 Hook이다. 컴포넌트의 상태를 함수 컴포넌트 내에서 관리할 수 있게 해준다.
• 사용 예: const [count, setCount] = useState(0); 여기서 count는 상태 값, setCount는 해당 상태를 업데이트하는 함수이다.

4. 객체/배열 구조분해할당에 익숙해지기

• 구조 분해 할당을 사용하면 객체나 배열의 속성을 간단하게 추출할 수 있다.
• 예를 들어, const {name, age} = person;는 person 객체에서 name과 age 속성을 추출한다.

5. spread operator & 배열 map 메소드

• Spread 연산자 ...는 배열이나 객체의 속성을 복사할 때 유용하다.
• map 메소드는 배열의 각 요소에 대해 함수를 실행하고, 결과를 새 배열로 반환한다. 주로 리스트를 렌더링할 때 사용된다.

6. 다양한 배열 메소드 익숙해지기

• JavaScript 배열은 다양한 메소드를 제공한다. filter, reduce, find, every, some 등이 있다.
• 각 메소드는 배열을 다룰 때 특정한 연산을 쉽게 수행할 수 있게 해준다. 예를 들어, filter는 조건에 맞는 요소만 추출할 때 사용된다.

오늘 배운 내용을 통해 리액트와 자바스크립트의 기초를 다지는 데 큰 도움이 되었다. 앞으로도 이런 핵심 개념들을 잘 활용하여 효과적으로 개발하는 능력을 키워나가야겠다.