useState의 인수로는 사용할 초기값을 넘겨준다. 아무런 값도 없으면 underfined가 나온다. useState의 반환값은 배열이다. 첫번째 원소로 state를 사용할 수 있고, 두 번째 원소인 setState 함수를 사용해 state값을 변경할 수 있다. import {useState} from 'react'const [state, setState] = useState(initialState) 아래는 숫자를 증가시키는 기능을 useState를 이용해서 적용하였다. React는 return값을 비교해서 렌더링이 되기 때문에 자동으로 적용되지 않아 useState를 이용해야만 했다.  숫자 증가 기능console.clear();import React, { useState } from "https:/..

리액트에서 css 사용하기style = {{ }} 안에 내용을 삽입하면 되는데 key:value 형식으로 값을 넣는다. css와 달리 각 요소는 ;가 아니라 쉼표(,)로 구분하고, 값은 따옴표("")로 묶여야 한다.const Square = () => { return ( 정사각형 );};const Circle = () => { return 원;};const App = () => { return ( );};ReactDOM.render(, document.getElementById("root"));  테일윈드 사용하기클래스 이름을 적용하면 테일윈드도 사용 가능하다. const Square = () => { return ( 정사각형 );};

리액트에서 함수 선언function Component(props){ return {props.hello}} 함수 선언문함수 선언할 때에 가장 일반적인 방법은 아래이다.function add(a,b) { return a + b} 함수 표현식function로 시작해 }로 끝나는 부분이 함수를 정의한 부분이다. 함수 표현식에서 코드의 혼란을 방지 하기 위해 함수의 이름을 생략하는 것이 일반적이다. const sum = function (a,b) { return a + b}sum(10,24) 함수 선언문과 표현식은 호이스팅에서 차이가 있다. 함수 표현식은 호이스팅 되는 시점에 underfined로 초기화된다. 반면에 함수 선언문은 어디서든 에러없이 수행한다.  화살표 함수ES6에서 추가된 함수 생성 방식이다...

https://codepen.io/ycraah/pen/GRbzMjr 리액트 세팅...codepen.io console.clear();import React, { useState } from "https://cdn.skypack.dev/react@18";import ReactDOM from "https://cdn.skypack.dev/react-dom@18";const App = () => { return 안녕 };ReactDOM.render(, document.getElementById("root"));

기본 테이블 태그는 전체 테이블을 감싼다. border="숫자"는 테이블의 경계선 두께를 결정한다. : table head라는 의미로 테이블의 첫번째 행에서 사용되어 각 열의 제목을 만드는데 사용된다. : table row라는 의미로 태그는 각각의 행을 나타낸다. : table date라는 의미로 테이블 행 내에 있는 각각의 셀을 표현하는데 사용된다.  * 테이블의 영역을 thead, tbody, tfoot으로 구분하기도 한다.    https://codepen.io/ycraah/pen/gONLbMY [07.26]테이블 만들기 연습...codepen.io넓이 지정colgroup: 각 행의 넓이를 width로 지정할 수 있다. 닫는 태그가 없다는 것에 주의하자.https://codepen.io/ycraah..

1단계) 세팅 https://codepen.io/ycraah/pen/JjQRJKy 팝업 만들기...codepen.io  2단계) 팝업 띄우기 https://codepen.io/ycraah/pen/BagLZLb 팝업 띄우기...codepen.io 3단계) 팝업 닫기창 만들기 https://codepen.io/ycraah/pen/yLdaXbe 팝업 닫기창 만들기...codepen.io