React에서 Hooks 는 함수형 컴포넌트에서 상태관리를 하기 위해 만들어진 도구이다.상태관리로 웹페이지를 렌더링 시키는 React의 특징을 잘 살릴 수 있는 도구라고 생각하면 된다.본 게시글에서는 자주 사용하는 Hook 들에 대해 알아보려고 한다. 1. useStateuseState는 리액트에서 가장 기본이 되는 상태 관리 훅이다.리액트는 컴포넌트의 상태(state)가 변경되면 가상 DOM을 통해 변경 사항을 감지하고, 필요한 부분만 다시 렌더링한다.이때 우리가 직접 상태값을 만들고, 변경할 수 있도록 도와주는 도구가 바로 useState 훅이다. useState 는 다음과 같이 사용된다.const [state, setState] = useState(initialValue); state : 현재 컴포..

1. .text()- 선택한 요소들의 텍스트 내용을 불러오거나 설정// 텍스트 읽기let txt = $("#myDiv").text();// 텍스트 변경$("#myDiv").text("새 텍스트"); 2. .html()- 선택한 요소들의 html 내용을 가져오거나 설정// HTML 읽기let html = $("#myDiv").html();// HTML 변경$("#myDiv").html("굵은 텍스트"); 3. .val()- , , 같은 폼 요소의 값(value) 을 가져오거나 설정// 값 읽기let val = $("#inputBox").val();// 값 변경$("#inputBox").val("새 값"); 4. .attr()- 선택한 요소의 속성(attribute) 값을 가져오거나 설정// 속성 읽기le..

요즘 프론트 트렌드는 리액트나 뷰를 이용해서 사용자 입장에서 더 동적이고 깔끔한 UI 를 구현하는게 트렌드이지만,여전히 자바스크립트를 사용해서 프론트를 개발하는 프로젝트도 많다.단순히 기술이 오래됐기 때문이 아니라, 기존 시스템을 유지보수하거나 빠른 개발속도를 유지하는게 실무에서 더 큰 영향을 미치기 때문이다. 새로움 프레임워크로 전환하려면, 개발자들은 공부를 지속적으로 해야하고 기존 프로젝트를 전반적으로 수정해야 하기 때문에 이미 안정화된 환경에서는 기존 방식으로 작업하는게 생산성을 높일 수 있었다. 이번에 입사하고 나서 현업에 오랫동안 종사하셨던 부장님들과 이사님들께 이런 저런 좋은 말씀을 많이 들었는데, 실무에서는 보통 리액트를 사용하지만, 자바스크립트 + jQuery 바탕으로 프론트를 작업하는 프..

오늘은 학원반의 다른 학생분의 코드를 리뷰해보는 과제가 있어 게시글을 작성해보려 합니다.css 를 제외하고 저희가 중점적으로 준비했었던 부분인 리액트 훅과 zustand 라이브러리를 사용한 상태관리 부분을 중점적으로 확인했습니다. 1. useUserStore.jsimport { create } from 'zustand';const useUserStore = create((set) => ({ loginUser: null, setLoginUser: () => { const saved = localStorage.getItem('loginUser'); const user = saved ? JSON.parse(saved) : null; set({ loginUser: user }); }, l..

오늘은 화살표 함수에 대해 알아보겠습니다.최근에 회고록을 작성하면서 화살표 함수가 늘 걸림돌이 되었는데, 오늘 이해해서 블로그에 글을 적어보겠습니다.자바스크립트에서 함수를 작성하려면 보통 이런 식으로 작성합니다.자바스크립트에서는 함수를 변수로 설정할 수 있습니다. 이를 통해 더 쉽게 함수를 호출할 수 있습니다.하지만 이보다 더 간단하게 함수를 작성할 수 있습니다. 바로 화살표 함수를 사용하면 됩니다.일단 화살표함수를 사용해서 코드를 수정해보겠습니다. 아까랑 조금 달라졌죠?먼저 function 이 사라지고 화살표가 생겼습니다. 이처럼 자바스크립트는 조금이라도 개발자가 편하게끔 함수를 쾌적하게 작성할 수 있도록 화살표 함수를 제공합니다. 메소드가 조금 다르긴 하지만 결과적으로는 같은 형식의 함수입니다.근데 ..