react30 [React] 3. props / props.children 컴포지션 안녕하세요. 박기린 입니다. 이번에는 React 컴포넌트의 핵심 중 하나인 props에 대해 알아보겠습니다. props의 역할 React 컴포넌트는 다른 컴포넌트(파일)의 데이터를 바로 가져올 수 없습니다. 그래서 HTML의 태그가 attribute를 이용해서 데이터를 주고받는 것처럼, React 컴포넌트도 props라는 것을 이용해서 데이터를 주고받습니다. props를 전달하는 방법 // App.js function App() { const expenses = [ { id: "e1", title: "Car Insurance", amoount: 294.67, date: new Date(2022, 2, 20), }, ]; return ( {/* 소문자로 시작 - html */} Let's get start.. 2023. 2. 7. [React] 2. 컴포넌트(Component) 안녕하세요. 박기린 입니다. 이번엔 리액트의 핵심인 컴포넌트(Component)를 만들어봅시다. 컴포넌트 만들기 // App.js import ExpenseItem from './components/ExpenseItem'; function App() { return ( // JSX Let's get started! // 소문자 // 대문자 ); } export default App; 리액트의 컴포넌트는 '함수형 컴포넌트'라고 부릅니다. 즉, JavaScript의 함수를 사용하기 때문에 function 키워드나 화살표 함수를 사용해서 컴포넌트를 생성할 수 있습니다. class형 컴포넌트도 있으나, 최신 React 버전에는 대부분 함수형 컴포넌트를 사용하기에 설명을 생략하겠습니다. JSX return ( L.. 2023. 2. 6. [React] 1. 리액트에 대한 사전 지식 안녕하세요. 박기린 입니다. 자바스크립트에 이어서, 이번에는 JavaScript의 client-side 라이브러리인 React에 대해 알아보겠습니다. 왜 자바스크립트보다 리액트인가요? 요약하자면, 반응형 웹을 쉽고 빠르게 만들 수 있기 때문입니다. 페이지의 버튼을 누르면 글자가 바뀌는 사이트가 있다고 가정을 합니다. JS는 querySelector()로 글자가 담긴 텍스트를 찾은 후에, textContent property를 수정해주고, 변화한 값이 스크린에 보여질 수 있도록 DOM을 편집해주고 등등 아주 많은 과정을 직접 적어줘야 합니다. 하지만 React는 정말 간단하게 이를 구현할 수 있습니다. Single Page Applications (SPAs) 리액트는 싱글 페이지 앱이라는 말을 자주 들으실.. 2023. 2. 3. 이전 1 2 3 4 다음
