본문 바로가기

개발공부_Blog154

useReducer, React-hooks(3) 8-3 useReducer useState와 useReducer는 컴포넌트의 상태를 관리하는 hook이다. useReducer는 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태관리를 할 수 있다 useReducer를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. 1. 컴포넌트 외부에 상태 업데이트 로직의 reducer함수 작성 기본형태 : function reducer(state, action) { ... } function reducer (state, action) { switch (action.type){ case 'INCREMENT' : return {value : state.value+1} case 'DECREMENT': retu.. 2022. 8. 10.
useEffect, React-Hooks(2) useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-2 useEffect 기본형태 : useEffect( function, deps ) function : 수행하고자 하는 작업 deps(의존배열) : 배열 형태이며, 배열 안에는 검사하고자 하는 특정값 or 빈배열이 들어간다 1. 마운트 될 때만 실행하고 싶을 때 = 컴포넌트가 처음 나타날 때만 실행하고 싶을 때 함수의 두 번째 파라미터(dep.. 2022. 8. 10.
useState, 가장 기본적인 React-Hooks useState, useEffect, useReducer Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다. useState : state의 상태를 관리하는 Hook useEffect : 렌더링 직후 작업 설정하는 Hook useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook 8-1 useState const Counter = ()=>{ const [value, setValue] = useState(0) useState 함수를 호출하면 배열을 반환 첫번째 원소 value = 현재 상태값 변수이고 두번째 원소 setValue = 상태값을 갱신해주는 setter함수다 useState 괄호 안의 값은 초기 상태값이다. //.. 2022. 8. 10.
React Hooks을 사용하는 이유 https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공합니다. Hooks을 사용하는 이유 1_ 컴포넌트 사이에서 상태로직을 재사용하기 어렵기 때문에 Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 2_ lifeCycle로 인한 중복로직을 피하기 위해서 생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가고는 한다. 예시로 componentDidMount 와 comp.. 2022. 8. 10.
(브라우저 렌더링 과정) 브라우저가 사용자에게 어떻게 UI를 그려내는가! 브라우저 렌더링 동작 과정 브라우저는 사용자가 원하는 정보를 웹에서 페이지를 찾아 보여주고, 하이퍼링크를 통해 사용자를 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 MDN에서는 정의하고 있다. **브라우저 : 인터넷 접속시 사용하는 Chrome, Safari, Firefox, Internet Explorer 등 웹 : 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 세계적인 정보 공간 브라우저는 유저가 선택한 페이지, 이미지, 비디오 등의 컨텐츠들을 서버로부터 받아와 렌더링 과정을 거쳐 유저에게 보여준다. 브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. Parsing : HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. Style : 두 Tree.. 2022. 3. 16.
프론트엔드 의존성?? 프론트개발에 node.js가 필요한 이유 1. 프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다 자바스크립트 스펙의 빠른 발전에 비해 브라우져의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다. 각 프레임워크에서 제공하는 도구를 사용하면 손쉽게 개발환경을 갖출수 있다. React.js의 CRA(create-react-app)를 사용한다면 말이다. 그러나 개발 프로젝트는 각자의 형편이라는 것이 있어서 툴을 그대로 사용할 수 없는 경우도 빈번하다. 커스터마이징 하려면 Node.js 지식이 필요하다. 어쩌면 .. 2022. 3. 16.
정규표현식 정규표현식 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions 정규 표현식 - JavaScript | MDN 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 , developer.mozilla.org 정규표현식은 문자열에 특정 문자조합과 대응시키기 위해 사용되는 패턴이다 특정한 패턴을 가지고 어떤 특정 문자열을 비교하여 true/ false로 결과값을 받는다 const expNameText = /[가-힣]+$/; const expHpText = /^\d{3}-\d{3,4}.. 2022. 1. 18.
isNaN() - NaN인지 판별하는 함수 isNaN() - 어떤 값이 NaN인지 판별하는 함수 함수는 몇몇 혼란스러운 케이스을 가지고 있으므로, ECMAScript 2015에서 추가한 Number.isNaN()으로 바꾸는 편이 좋을 수도 있습니다. - mdn 구문 isNaN(value) 매개변수 value테스트되는 값. 반환 값 주어진 값이 NaN이면 true, 아니면 false. 설명 isNaN 함수의 필요성 NaN = Not a Number 의 약어 JavaScript의 다른 모든 값과 달리, NaN은 같음 연산(==, ===)을 사용해 판별할 수 없습니다. NaN == NaN, NaN === NaN이기 때문입니다. 그래서 NaN을 판별하는 함수가 필요합니다. 2022. 1. 18.
javascript _ Date() 밀리초를 날짜로 변환하기 Date() 자바스크립트 Date 객체는 날짜 정보를 밀리 세컨드 단위로 저장합니다. 1970년 1월 1일이 기준 시점이 되며, 입력된 날짜값과의 차이가 Date 객체의 값입니다. Date 객체 생성 자바스크립트의 내장 객체인 Date로 객체를 만들면, 빈 객체가 아닌 현재 시간 정보가 객체 안에 자동 삽입됩니다. 코드를 실행해서 웹페이지를 새로고침 해보면 초단위 데이터가 계속 갱신되는 것을 확인해 볼 수 있습니다. let 객체명 = new Date(); Date() 생성자의 인수 Date 생성자는 괄호 안의 인수가 들어갑니다. 년도, 월, 일, 시간, 분, 초, 밀리 세컨드 단위까지 작성될 수 있습니다. let 객체명 = new Date(year, monthIndex, day, hours, minute.. 2022. 1. 18.

티스토리툴바