🔑아는 내용도 다시 한번
💡 호이스팅과 다양한 함수 선언, ES6+ 문법 및 React 기본 개념
📃 2주 동안 자바스크립트의 기본 문법과 동작 방식인 호이스팅, 다양한 함수 선언 방법, ES6+의 문법 요소(단축 속성명, 계산된 속성명, 전개 연산자, 비구조화), 그리고 React의 핵심 개념인 JSX 구조, 특수 Props(children), 이벤트 객체 활용, 컴포넌트 생명주기를 학습했습니다. 언급된 이 모든 내용은 실무에서 정말 많이 사용되기 때문에, 깊이 있게 알고 있는 것은 중요한 것 같네요.
💻호이스팅과 함수 선언 방법
// 함수 선언식 - 호이스팅 가능
console.log(sayHello()); // 'Hello'
function sayHello() {
return 'Hello';
}
// 함수 표현식 - 호이스팅 불가능
// console.log(sayHi()); // ReferenceError
const sayHi = function () {
return 'Hi';
};
⬆️ 호이스팅은 자바스크립트에서 변수와 함수 선언이 실행 전에 끌어올려지는 동작입니다. 핵심은 함수 선언식은 호이스팅되지만, 함수 표현식은 호이스팅 되지 않으므로 주의가 필요합니다
💡 JSX와 특수 Props children
📃 React에서 JSX는 HTML과 유사한 문법을 통해 UI를 설계하며, 하나의 부모 요소만 반환할 수 있습니다. 또한, 컴포넌트에서 기본적으로 제공되는 특수 Props인 children을 활용해 유연하게 콘텐츠를 전달할 수 있습니다
💻JSX와 특수 Props(children)
function Wrapper({ children }) {
return <div className="wrapper">{children}</div>;
}
function App() {
return (
<Wrapper>
<h1>Hello, World!</h1>
</Wrapper>
);
}
⬆️ children을 활용하면 컴포넌트를 재사용하면서 내부 콘텐츠를 동적으로 조정할 수 있습니다.
💡 이벤트 객체와 컴포넌트의 생명주기
📃 React 이벤트 객체는 함수의 매개변수로 전달되며, 기본 동작을 방지하거나 데이터를 처리하는 데 활용됩니다. 또한, 컴포넌트의 생명주기(Lifecycle)는 Mounting, Updating, Unmounting 단계로 나뉘어 관리됩니다.
💻이벤트 객체 활용 및 생명주기
function Button() {
const handleClick = (event) => {
event.preventDefault();
console.log('Button clicked!', event);
};
return <button onClick={handleClick}>Click Me</button>;
}
⬆️ 이벤트 객체는 preventDefault()와 같은 메서드를 제공해 기본 동작을 제어하며, 생명주기는 useEffect 훅을 통해 관리할 수 있습니다.
📝 SUMMARY
2주 동안 이해가 되든 안되든 모던 리액트 책을 다 읽어보자 했는데, 절반도 못 읽었네요...ㅎ 사실 한 3번정도 공부한 내용이고, 다 알고 있는 내용이라고 생각했었는데, 중간중간 강사님이 구현해 보라고 주시는 Lab 문제들은 아직까지는 막히는 부분들이 있던 것 같네요. 그래도 이제는 회원가입, 상품 정렬, 이벤트 처리와 같은 간단한 구현은 할 수 있는 것 같아서, 많이 발전한 것 같고, 뿌듯했습니다. 앞으로 React에 대해서 더 깊이 있는 공부가 필요할 것 같기는 합니다. 생명 주기 파트는 저도 잘 모르던 생소한 내용이라 많은 공부가 되었습니다. 앞으로의 목표는 React의 diff 알고리즘을 직접 구현해보는 것 입니다!!
📌 호이스팅: 함수 선언식과 표현식의 차이를 이해
📌 JSX: 하나의 부모 요소만 반환 가능
📌 React 이벤트 객체: event.preventDefault()로 기본 동작 방지
📌 React 생명주기: 컴포넌트의 Mounting, Updating, Unmounting 단계 이해