반응형 Web Front 개발공부56 리액트 useReducer 2024년 새해. 진지하게 리액트 공부를 시작했다. Hook은 낚아채다는 뜻이다. 프로그래밍에서는 어떤 시점에 일어나는 순간을 인지하고 프로그래머가 그 지점에 원하는 기능을 구현하는 정도로 이해해도 될듯하다. 리액트에서 Hook 으로 불리는 카테고리 안에는 많은 기능들이 존재하는데, 이번 포스팅은 useReducer 다. 리덕스와 거의 비슷한 기능이지만 리덕스를 본격적으로 공부하기 전에 연습하고 기억해두려고 한다. 페이지 상단에 임포트하고 import React,{useReducer} from "react"; 사용할 펑션을 구현한다. 리액트는 변수와, 그 변수를 컨트롤하는 함수 패턴. useState도 동일. function reducer(state, action){ //action.type 값에 따라 .. 2024. 1. 27. 자바스크립트 실행 순서 자바스크립트 실행 순서 이미지 웹브라우저로 위의 소스를 실행하면, img-1 속성을 읽을 수 없으므로 console.log(img1) 의 결과는 null로 콘솔 로그가 찍히게 된다. 이번 포스팅에 자세히 설명하지 않겠으나 모든 프로그램 언어는 '생명주기'란 것이 존재하며 프로그램의 실행 순서를 반드시 이해할 필요가 있다. 이번에는 아래와 같이 소스를 변경하고 실행해 본다. 자바스크립트 실행 순서 이미지 실행결과는 script 코딩을 2023. 11. 4. 리액트 State 요즘 리액트 공부에 푹 빠져 있다. 오늘은 state에 대한 내용으로 정리를 해두고자 한다. import "./App.css"; import { Component } from "react"; import TOC from "./Components/TOC"; import Content from "./Components/Content"; import Subject from "./Components/Subject"; class App extends Component { constructor(props) { super(props); this.state = { subject : {title:'WEB', sub:'world wide web!!'}, content:[ {id:1, title:'HTML', desc:'H.. 2023. 8. 19. 리액트 이벤트 onChange 다루기 리액트 이벤트 onChange 리액트를 공부해야겠다고 결심하고 곧바로 도서관에서 책을 대출해 왔다. 리액트 문법이나 특징을 전혀 모르는 상태는 아니지만, 책 하나 잡고 챕터 하나씩 따라 하며 빠르게 예제를 따라 하다 보면 의외로 여러 가지 저자의 노하우나 기본기를 탄탄히 다질 수 있다. 공부하다가 자주 사용할 만한 예제들을 기록해 놓고 훗날에 잊을 때마다 꺼내보고자 포스팅한다. input 요소를 랜더링 하는 코드와 해당 요소에 onChange 이벤트를 설정하는 코드를 작성하고 onChange 이벤트 부분에 e를 인자로 받아 target.value 콘솔로르 함수로 찍어본다. import React, { Component } from "react"; class EventPractice extends Comp.. 2023. 7. 30. 인텔리j에서 리액트 개발환경 구성하기 인텔리j에서 리액트 개발환경 구성하기 2016년 쯤 **통신사 프로젝트에 참여하게 됐는데 프론트 개발파트와 백엔드 개발파트를 나누어서 진행했었다. 나는 백엔드 개발자 역할로 들어갔었는데 그 때 처음 SPA를 접하게 됐다. 그 당시 프론트 개발파트에서 사용하던 JS 라이프러리가 React였고 특징, 장단점 등을 어깨너머로 익혔고 약간의 코딩도 해봤지만 CRUD를 모두 경험해 본 터는 아니었다. 어느덧 7년이라는 세월이 흘렀다. 요즘 참여하고 있는 프로젝트는 프론트, 백엔드 이렇게 나누어서 개발하는 곳은 아니다. 운 좋게 대형 프로젝트인데 분석, 설계, 개발까지 모두 타임라인 순으로 모든 역할을 하고 있으며, 현재는 개발 단계로 프론트, 백엔드 이것저것 닥치는 대로 하는 중이다. 오랜만에 자바스크립트를 하게.. 2023. 7. 23. 자바스크립트 Arrow Function 자바스크립트 Arrow Function Arrow Function은 함수를 정의하는 새로운 방법이다. 이런 게 언제 생겼는지 모르겠다. 사실 전문 웹프론트 개발자가 아닌 "나" 이기에... 새로운 문법이나 몰랐던 방법을 보게 되면 바로바로 기억해서 써먹어보고자 노력하는 편이다. 오늘은 화살표 함수에 대해 알아본다. 화살표 함수를 사용해 함수를 정의하면 기존 함수 선언식이나 함수 표현식에 비교해 구문이 짧아진다는 장점이 있다. 화살표 함수 내의 this는 언제나 상위 스코프 this를 가리킨다. 예제 // 함수 선언식 function hello(str){ return "Hello, " + str } // 함수 표현식 const hello2 = function (str){ return "Hello, " + .. 2023. 7. 16. 이전 1 2 3 4 5 6 ··· 10 다음 반응형
