개발나라 스용공주

이번 글은 웹 스토리지에 대한 글이다.  [ 웹 스토리지란? ]리액트로 만든 사이트를 새로고침하면 state에서 담고 있는 값이 초기화되어 데이터가 사라지는 것을 확인할 수 있다.이때 데이터를 사라지지 않도록 웹에 저장할 수 있게 해주는 공간을 웹 스토리지라고 한다. 웹 브라우저에 기본적으로 내장되어 있는 데이터베이스로 별도의 프로그램이나 라이브러리의 설치가 필요하지 않고 자바스크립트 내장함수만으로 접근이 가능하다.   [ 웹 스토리지 종류 ]웹 스토리지는 SessionStorage와 LocalStorage 2가지가 존재한다.2가지 모두 값을 저장하고 꺼내고 기본적인 동작 방법이 동일하다.차이점은 사용하는 명칭도 다르지만 데이터를 어디에 저장하고 언제 초기화되는지에 따라 두 스토리지의 차이점이다.  [ ..

이번 글은 현재 연도, 날짜, 요일을 불러오는 방법에 대한 글이다.  아래 코드와 같이 작성하면 된다. {new Date().toDateString()} Date()로 새로운 객체를 생성한다.문자열로 읽기 편한 형태로 렌더링하기 위해 toDateString()으로 렌더링을 해준다. (바로 Date() 자체를 출력 시 오류)

이번 글은 리액트에서 useRef을 사용하는 방법에 대한 글이다.  [ useRef란? ]useRef는 새로운 reference 객체를 생성하는 함수이다.렌더링에 영향을 미치지 않는 변수 생성 시 사용된다. ( useState() ) useRefuseState 레퍼런스 객체 생성스테이트를 생성 컴포넌트의 내부의 변수로 활용가능 리렌더링 X리렌더링 O 렌더링에 영향을 주지 않는 변수 생성 시 사용렌더링이 필요한 변수 생성 시 사용  useRef나 useState로 만든 리액트의 특수한 변수들은 컴포넌트가 리렌더링되어도 리셋이 되지 않지만 일반 변수의 경우 리렌더링 시 값이 리셋이 된다.(컴포넌트 내부의 변수가 필요하다면 렌더링의 유무에 따라 useRef 또는 useState를 사용)  current 프로..

이번 글은 리액트에서 state로 입력을 받고 처리하는 내용에 대한 글이다.  [ state 상호작용 ]사용자에게 입력받은 값을 state 변수를 상태변화로 적용시켜 해당 변수의 값을 출력하는 예제이다.완성된 예제는 아래 사진과 같이 input 안에 작성한 값이 텍스트 박스 옆에 표시된다.  1) 먼저 placeholder를 통해 텍스트 박스가 작성되기 전 "이름"이 표시되도록 한다.placeholder={"이름"}  2) 텍스트 박스에 작성되는 값에 따라 변수의 값을 변경해줘야하므로 state를 사용해야한다.이때 state는 구조분해할당을 사용해 배열을 할당받았다.const [name, setName] = useState("");  3) 이벤트를 발생시키는 이벤트 핸들러 부분이때 매개변수 e는 이벤트를..

이번 글은 리액트에서 props와 state의 상호작용에 대한 글이다.  [ props와 state의 상호작용 ]props는 부모에서 받아온 값을 객체로 반환하는 것이고 state는 현재 가진 값을 상태변화함수를 통해 변화시키며 리렌더링해주는 변수이다. 예제 1) 부모 컴포넌트 App()에 state의 값이 존재함const [light, setLight] = useState("Off"); => 자식 컴포넌트 Bulb에서 인수로써 이 state를 props로 받아옴const Bulb = ({ light }) => {} => 가져온 값을 활용한 조건식 작성{light === "On" ? ( On ) : ( Off )} => 부모 컴포넌트에 자식 Bulb를 보내고 값..

이번 글은 리액트에서 state를 활용하는 법에 대한 글이다.  [ state란? ]state는 현재 가지고 있는 형태나 모양을 정의한 값으로 변화할 수 있는 동적인 값이다.컴포넌트의 현재 상태를 보관하는 변수이다.그래서 state의 값에 따라 렌더링되는 UI가 결정된다.  [ State 사용법 ]state 사용을 위해선 useState를 꼭 임포트 후 사용할 수 있다.import { useState } from "react";    [ State 구조 ]useState()는 새로운 state를 생성하는 함수고, 인수로는 state의 초기값을 받는다.state는 2개의 요소를 담은 배열을 반환한다.state의 현재 값과 state를 변경시키는 상태변화함수를 반환한다. import "./App.css";i..

이번 글은 리액트에서 이벤트 핸들링에 대한 글이다.  [ Event Handling ]Event는 버튼 클릭, 메세지 입력, 스크롤 과 같이 웹 내부에서 발생하는 사용자 행동이다.Event Handling는 웹에서 이벤트를 발생 시 처리하는 것으로 버튼 클릭 시 경고창이 노출되는 등의 과정이다. onClick = {onClickButton}는 이벤트를 처리하는 부분으로 이벤트 핸들러다.=> 이벤트에 해당하는 클릭(onClick)이 실행되면 onClickButton과 같은 함수가 실행된다. const Button = ({text, color,children}) => { const onClickButton = () => { console.log(text); }; return ( {..

이번 글은 props에 대한 글이다.  [ Props ]함수에 인수를 전달하듯 값을 전달할 때 컴포넌트에 전달된 것으로 객체 형태로 전달된다.객체로 부모의 값이 전달되고 부모에서 자식으로만 전달할 수 있다.props는 JS, html, react 컴포넌트 등을 담을 수 있다. [ 부모 - App 컴포넌트 ]import './App.css'import Button from './components/Button';function App() { return ( )}export default App [ 자식 - Button 컴포넌트 ]const Button = (props)=>{ console.log(props); return 클릭;};export d..