Front-end26 [React] useReducer 최근 온라인 강의 사이트인 Udemy에서 할인행사를 통해 리액트 강의를 구입해서 진행중이다. 관련 깃 : https://github.com/kijung7942/react-practice 아직 너무나 기초단계만을 진행중에 있으나, 포스팅할만한 주제가 생겨 글을 적어보려한다. React에 대해서 잘 모르는 사람이라더라도 useState에 대해서는 어느정도 들어봤고 알기 쉬울 것 같다. 상태관리라는 패러다임을 통해서 SPA가 가능하도록 하는 리액트에서 주로 사용하는 React Hook인데, 이를 보다 강력하고 복잡한 상태관리를 할 수 있도록 해주는 것이 useReducer이다. 예를들어 useState 를 이용해 3개의 서로 관련된 상태를 관리하고 있다고 가정해보자. import { useState } fro.. 2023. 4. 25. 제 41강 Shorthand Properties, Concise Method : 쉽게 작성하기 ES2015+ 부터 적용되는 문법 중 코드(객체)를 작성하는데 있어서 편리한 문법이 있다. 사실 많이 사용중이고 자주 사용중이어서 개념자체는 이해를 하고 있었지만 해당 문법을 지칭하는 용어를 몰랐기에 포스팅한다. 먼저 Shorthand Properties는 객체가 가지는 key의 이름과 value가 될 변수의 이름이 동일하면 key : value 형식으로 적지 않아도 JS가 알아서 매핑하여 넣어주는 것을 말한다. 예를 들면 다음과 같이 사용이 가능하다. const name = 'kj'; const nickName = 'ssombba'; const obj = { 'name': name, 'nickName': nickName, } const objWithShorthand = { name, nickName, .. 2023. 2. 20. 제 20강 값식문 값 : 프로그램이 조작할 수 있는 entity를 표현한 것. => 문자, 숫자, boolean 등의 여러가지 타입으로 표현될 수 있음. 식 : 평가를 통해 값을 도출해내는 표현식 (ex 1 + 1, 'foo' + bar, foo / bar 등) 문 : if문, case문, 반복문 과 같이 어떠한 값으로 귀결되는 것이 아닌, 어떠한 행동(기능)을 하도록 명시해둔 것. => 값이 들어가야 하는 부분에는 들어갈 수 없으나 즉시실행함수 등으로 만든다면 넣을 수 있음. => 보기좋도록 고차함수로 고치는 것이 더 좋음. 2023. 1. 6. Vue3 기초: form data 다루기 웹어플리케이션에서 form을 이용한 데이터 바인딩은 필수적인 기술이라고 할 수 있다. 이를 통해야만 기본적인 로그인, 회원가입 등이 가능하기 때문이다. 또한, 클라이언트가 무엇을 원하는지를 서버가 알수있는 창구가 되어주기 때문에 form을 이용한 data다루기는 선택이 아닌 필수이다! 다행히 Vue에서 form data는 비교적 다루기 쉽다. Vue에서 제공하는 v-model을 input 태그에 달아주면 Vue가 알아서 양방향 바인딩(컴포넌트의 프로퍼티의 값을 바꿔줌과 동시에 view에 출력되는 값도 바뀐다.)을 해준다. {{ user }} 이름 나이 위와 같은 코드로 vue 서버를 올려보면 아래와 같은 화면을 볼 수 있다. 이름 옆의 input 창에서 이름을 바꾸면 위에 출력된 user 프로퍼티의 값도.. 2022. 2. 24. 이전 1 2 3 4 ··· 7 다음
