Props ? - 프로퍼티스의 줄임말. import React from "react"; import Counter from "./Counter"; import MyFooter from "./MyFooter"; import MyHeader from "./MyHeader"; function App(){ const number = 5; return ( ) } export default App; 프로퍼티스를 여러개 전달해 줄 수 있다. 하지만 이런식으로 props를 전달하면 길어지기때문에 자식컴포넌트에 보내줘야하는 prop들을 객체로 만들어 보내주는게 좋다 counterProps 객체를 만들고 할당시 스프레드 객체인 {...counterProps}로 받았다 import React, {useState} from ..

리액트에서의 상태 : 다크모드를 예시로 컴포넌트가 갖는 theme처럼 계속 값이 바뀔 동적 데이터 Counter 컴포넌트를 App 컴포넌트의 자식요소로 추가 import './App.css'; import MyHeader from './MyHeader'; import MyFooter from './MyFooter'; import Counter from './Counter'; const func = () => { return "func"; } const number = 5; function App() { return ( 안녕리액트 {func()} {number}는 : {number % 2 === 0 ? "짝수" : "홀수"} ); } export default App; + - 버튼에 아무런 동작도 정의하지..

//윤년을 확인하는 함수 만들기 function isLeapYear(year){ if ((year % 4 === 0) && (year % 400 === 0) || (year % 100 !== 0)) { console.log("윤년입니다"); } else { console.log("평년입니다"); } } isLeapYear(600); 예전에 자바 처음배울 때는 이거 나머지 생각못해서 두 시간 동안 꽁꽁 싸매고있었는데.. 그래도 이제 윤년 내용보고 만들 수 있는거보니 .. 수학 실력 좀 늘어난 듯 ;-; function isLeapYear(year){ return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0) } console.log(`2022년..

React.js : Node 기반의 Javascript UI 라이브러리, npm스토어에서 받을 수 있다. 리액트와 함께 사용하는 라이브러리. 패키지들 Webpack : 모듈번들러, 다수의 자바스크립트 파일을 하나의 파일로 합쳐준다. Babel : 자바스크립트 컴파일러. JS와 html 을 혼용하는 문법등의 자바스크립트 코드를 쉽고 직관적으로 사용할 수 있도록 도와준다. 또한 최신 자바스크립트 문법을 지원하지 않는 브라우저들에도 작동할 수 있도록 변환시켜준다. Boiler Plate : 리액트를 사용할 때 필요한 패키지의 환경 및 기초셋팅작업을 다 해둠. 패키지를 감싼 패키지. 보일러를 찍어내듯 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지 Create React App 이라는 Boiler Plat..

리액트의 필요성 1 : React는 Component 기반의 UI라이브러리 article 제외 한 나머지 부분들이 중복되어 있다. 만약 중복된 header 섹션의 수정이 필요하다면? 모든 페이지를 수정해야만한다 두 세장이면 괜찮지만 100장의 페이지를 바꿔야한다면? 산탄총수술(Shotgun Surgery) : 한 개의 문제가 수많은 파일들을 동시에 수정시킨다 ==> 유지보수에 많은 낭비가 생김 그렇기 때문에 재사용 되어야 할 요소들은 header나 nav, footer는 별도의 모듈로 만들어 컴포넌트의 이름으로 불러서 관리해야한다. React는 Component 기반의 UI라이브러리이기 때문에 모든 html요소들을 다 컴포넌트로 만들어서 재사용이 용이하다. ==> 중복코드로 인해 발생하는 산탄총 수술같은..