성운 공부방

이벤트 핸들링이란?- 웹에서 이벤트가 발생했을 때 그것을 처리하는 것- 웹에서 발생하는 사용자들의 행동을 처리해주는 것이라고 볼 수 있다.ex) 버튼 클릭시 경고창 노출  const Button = ({text, color, children}) => { return( { console.log(text); }} style = {{ color: color }} > {text} - {color.toUpperCase()} {children} ); Button.defaultProps = { color: ..

Props란?- 부모 컴포넌트가 자식 컴포넌트에게 함수에 인수를 전달하듯이 값을 전달할 수 있다. ➡️ 컴포넌트에 전달된 값들을 Props라고 한다. 예시 - App.jsximport "./App.css"import Button from "./components/Button"; // Button 불러오기function App() { return ( {/* 이렇게 색깔을 넣을 수 있음 */} );}export default App; - Button.jsxconst Button = (props) => { console.log(props); return( {props.text} -..

React Component 예시 function Footer() { return( footer )} ✔️ JavaScript에서는 함수 안에 html 코드를 작성을 하지 못한다. 따라서 문법적인 오류로 판단한다. 하지만 React에서는 JSX 문법을 사용하므로 오류로 판단하지 않는다. JSX 란? - 확장된 자바스크립트 문법을 말한다.- Java Script와 html을 같이 사용할 수 있게 된다. 위에 이미지와 같이 myName 같이 변수를 설정해 중괄호 안에 변수를 넣어 html로 렌더링 되게 할 수도 있다.※ 중괄호 안에는 연산식, 삼항 연산자 등을 사용할 수 있다. ‼ 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. - 조건문, 반복..

App, Header이라는 컴포넌트를 만들어보자.function App() { // function을 이용하여 컴포넌트 생성 가능 return( 안녕 리엑트! );}; const Header = () => { // 화살표 방식으로도 생성 가능 return ( header );}; 컴포넌트 만들 때 변수명을 필수로 대문자로 설정해줘야 한다.  실행을 해보면 Header 컴포넌트는 렌더링이 되지 않고 있다. 왜냐하면 아래 이미지처럼 main.jsx 파일에 render 되고 있는 것이 App이기 때문에 렌더링 되고 있는 것이 App이고 Header은 렌더링이 되고 있지 않는 것이다.  Header를 랜더링 시켜주고 ..

React App ➡️ React로 만든 웹 서비스들은 보통 React App, React Application이라고 불린다. React 생성 방법1.  Node.js  패키지 생성2.  React 라이브러리 설치3.  기타 도구 설치 및 설정 ➡️ 입문자에게는 권장하기 어려움   ➡️ 공식 문서에서도 Vite을 권장하고 있고, 많은 곳에서도 Vite을 이용해 React App을 만들고 있다. 1. React App 생성 (with vite)npm create vite@latest 2. React App 가동npm run dev - http : // localhost : 5173의 의미는 내 컴퓨터의 주소를 의미- 웹 브라우저에서 localhost : 5173으로 들어가면 react server를 들어갈..