Today Hailie Learned

사이드 이펙트 = 이펙트 Side Effect 리액트의 주요 임무 UI를 렌더링 하는 것. 사용자 입력에 반응하여 필요할 때 UI를 다시 렌더링 하는 것이다. 사용자 입력에 따른 반응 화면에 보이게 하기 그렇다면 리액트의 사이드 이팩트는?? 주요 임무 외의 모든것! ex) http 리퀘스트를 보내는 것 or 브라우저 저장소에 무언가를 저장하는 것 or 타이머 간격 조정하는 것 사이드 이펙트는 직접적으로 컴포넌트 함수에 들어가서는 안된다. 그 이유는 버그나 무한 루프가 발생할 가능성이 높기 때문이다. 또는 http 리퀘스트가 너무 많이 보내질 수도 있다. 그래서 사이드 이팩트를 핸들링하는 훅을 사용하는 것이다. 그게 바로 useEffect이다. useEffect(()=> {}, [dependencies])..

버튼을 누르고 (데이터를 submit 하고) 입력된 것 지우기 양방향 바인딩을 사용하자 변경되는 입력값만 수신하는 것이 아니라 입력에 새로운 값을 다시 전달할 수도 있다!! 그래서 프로그램에 따라 입력값을 재설정하거나 입력할 수 있다. const [enteredDate, setEnteredDate] = useState(new Date()); const [enteredWeight, setEnteredWeight] = useState(""); 상태 변경을 관리하는 함수를 활용하면 되는데, const submitHandler = async (event) => { event.preventDefault(); const inputData = { date: new Date(enteredDate), weight: en..

리액트 핵심 1 . 만약 변화하는 데이터를 가지고 있는데 그 변화하는 데이터가 사용자 인터페이스에 반영되어야 한다면 state가 필요하다. 왜냐면 일반적인 변수는 수행하지 않지만 state를 사용하면 값을 설정하고 변경할 수 있기 때문이다. 그리고 state가 바뀌면 리액트는 그 state가 등록된 컴포넌트를 재평가할 것이다. 그리고 다른 컴포넌트는 빼고 그 컴포넌트만 재평가할 것이다. state가 등록된 그 컴포넌트만!! 리액트 핵심 2 . 리액트는 컴포넌트 별 인스턴스를 기반으로 해서 독립적인 state를 갖는다. 1. 가장 일반적은 useState 사용법 const ExpenseForm = () => { const [enteredTitle, setEnteredTtile] = useState('');..

Change Title ➥ 이렇게 코드를 쓰면, 이 코드 라인이 분석되었을때 자바스크립트가 이것 실행할것이다. 그리고 JSX코드가 반환될 때 이 코드 라인이 분석된다. 즉, 클릭할 때 clickHandler가 실행되는 것이 아니라 JSX코드가 평가될 때 실행된다. 이게 너무 이르기 때문에 clickHandler라고 지정만 해주면 된다. 👇👇👇 Change Title 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

리액트로 CRUD를 구현하던 중에, 유저가 빈칸을 입력하면 입력이 되지 않도록 하는 코드 입니다. 부모 파일인 App.js에서는 Create에 대한 handler를 자식 파일에게 props로 전달해줍니다. const addGoalHandler = (enteredText) => { setCourseGoals((prevGoals) => { const updatedGoals = [...prevGoals]; updatedGoals.unshift({ text: enteredText, id: Math.random().toString() }); return updatedGoals; }); }; 그리고 자식에서는 그 props를 받아서 submit을 하기 전에, 현재 값의 길이가 0이면 그냥 return 을 해줍니다...

WAI-ARIA 란? WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격, 짧게, 웹 접근성을 향상시킬 수 있는 방법 중 하나 WAI (web accessibility initiative) = 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 ARIA (accessible rich internet applications) = 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술 RIA (rich internet applications) = 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. WA..

웹 접근성(Web Accessibility)이란? 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것. 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다. 시력이 좋지 않은 경우, 텍스트를 음성으로 읽어주는 스크린 리더를 사용한다. 그런데 이미지에 들어있는 글자의 경우는 스크린 리더가 인식할 수 없어 음성으로 읽어줄 수 없다. 국내 온라인 쇼핑몰 사이트를 보면 상세 정보가 이미지로 올라와 있는 경우가 많다. 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점..! 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층 확대 : 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되고, 매출 증가..

리덕스 스토어를 리액트 앱에 제공하기 위해서 주로 index.js 파일로 간다. 거기서 전체 앱을 렌더한다. (컴포넌트 트리의 가장 위쪽) 거기서 root 컴포넌트를 렌더한다. 컴포넌트의 대부분이 스토어에 접근해야 한다면, 가장 높은 레벨에서 를 제공해야한다. import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import "./index.css"; import App from "./App"; import store from "./store/index"; ReactDOM.render( , document.getElementById("root") ); 👇 App에 있는 모든 컴포..

리덕스 처음부터 시작하기 모듈 설치하기 npm i redux react-redux 리덕스를 사용하려면 require로 불러온다. const redux = require("redux"); 저장소 만들기 const store = redux.createStore(); 저장소 만들기 (데이터를 관리함)(관리하는 데이터는 결국 리듀서 함수에 의해 결정된다.리듀서 함수가 새로운 상태 스냅샷을 생성하니까) (리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어내야 한다.) 리듀서 함수 만들기 const counterReducer = (state = { counter: 0 }, action) => { return { counter: state.counter + 1, }; }; ➥ 위 함수 해석: 우리가 자동으로 받..

리액트로 일기장을 만드는 토이 프로젝트 중에 날짜 형식을 바꾸고 싶었다. 현재 날짜 형식 클라이언트에서 보내주는 날짜는 아래와 같다. new Date() 나는 2022년 07월 20일 이런 형식으로 나타내고 싶었고, 내가 아는 자바스크립트 문법으로 아래와 같이 코드를 짰다. const year = data.date.getFullYear(); const month ={data}.date.getMonth() + 1; const date = {data.date}.getDate(); const showFilteredDate = `${year}년${month