dev.zip

.https://ko.react.dev/learn/state-as-a-snapshot#:~:text=%EC%83%81%ED%98%B8%EC%9E%91%EC%9A%A9%EC%84%B1%20%EB%8D%94%ED%95%98%EA%B8%B0-,%EC%8A%A4%EB%83%85%EC%83%B7%EC%9C%BC%EB%A1%9C%EC%84%9C%EC%9D%98%20State,-State%20%EB%B3%80%EC%88%98%EB%8A%94%20%EC%9D%BD%EA%B3%A0 스냅샷으로서의 State – ReactThe library for web and native user interfacesko.react.dev 스냅샷이란?React 컴포넌트가 특정 시점에 가지고 있던 state의 고정된 값 import { u..

렌더링이란?: React 컴포넌트를 화면에 표시하기 위한 준비과정 UI를 요청하고 제공하는 세 가지 단계가 있다.화면 업데이트는 이 단계로 이루어지는 것이다.1) 렌더링 트리거2) 컴포넌트 렌더링3) DOM에 커밋 트리거란?: React 컴포넌트가 다시 렌더링 되도록 촉발시키는 조건이나 사건 DOM이란?: Document Object Model (문서 객체 모델) 웹 페이지의 구조화된 표현으로, HTML, XML 문서를 해석하여 생성하는 객체 모델이다. 조금 더 쉽게 말하면 웹 페이지의 내용을 JavaScript로 조작할 수 있도록 트리 형태로 구조화한 모델 1단계 : 렌더링 트리거컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.1. 컴포넌트의 초기 렌더링인 경우2. 컴포넌트의 state가 ..

기본 동작 방지하기일례로 의 이벤트는 그 내부의 버튼을 클릭했을 시 페이지 전체를 리로드 하는 것이 기본 동작이다.export default function Signup() { return ( alert('Submitting!')}> Send );}위의 코드에서 보면, onSubmit 이벤트를 통해서 form 내부에 인풋 태그를 작성후 버튼을 누르면, Submitting! 이라는 alert창이 뜨게 된다. 하지만 여기서 export default function Signup() { return ( { e.preventDefault(); // 이벤트 오브젝트 호출 alert('Submitting!'); }}> S..

React에서는 JSX에 이벤트 핸들러를 추가할 수 있다. 이벤트 핸들러란?: 클릭, 마우스 호버, 폼 인풋 포커스 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수이다. 이벤트 핸들러 추가하기1. 함수 정의2. 적절한 JSX 태그에 prop 형태로 전달 export default function Button() { function handleClick() { // 함수 생성 alert('You clicked me!'); } return ( // 클릭했을 시 이벤트 핸들러 처리 Click me );}이 코드에서 보면, function handleClick()이라는 함수를 생성해주었고, 이후에 return 내부에 으로 prop 형태로 전달해주었다. handle..

컴포넌트란?: 마크업으로 뿌리내릴 수 있는 JavaScript 함수웹에서는 HTML 을 통해 , 와 같은 태그를 사용하여 풍부한 구조의 문서를 만들 수 있다.React를 사용하면 마크업, CSS, Javascript를 앱의 재사용 가능한 요소인 사용자 정의 컴포넌트로 결합할 수 있다. 추가적으로, React 오픈 소스 커뮤니티에서 공유되는 수천개의 컴포넌트로 프로젝트를 빠르게 시작할 수 도 있다.예를 들어 Chakra UI , Material UI가 있다. 컴포넌트를 빌드하는 방법1. 컴포넌트 내보내기export default 접두사는 표준 JavaScript 구문이다. 나중에 다른 파일에서 가져올 수 있도록 파일에 주요 기능들을 표시할 수 있다.export default 2. 함수 정의하기Reac..

조건부 렌더링이란?: 컴포넌트가 자신의 상태나 props에 따라 다른 JSX(엘리먼트, 컴포넌트)를 선택적으로 보여주는 기법- 컴포넌트는 조건에 따라서 다른 항목을 표시해야하는 경우가 많은데, React는 if 문, && 및 ? : 연산자와 같은 자바스크립트 문법을 사용하여 JSX를 조건부로 렌더링한다. {name} {isPacked && '✅'}다음 코드에서 보면, IsPicked 값이 true면 , ✅ 값을 반환한다. 리스트 렌더링이란?: 데이터 모음으로부터 유사한 컴포넌트를 여러 개 표시하고 싶을 때, React와 JavaScript의 filter()와 map()을 함께 사용하면 데이터 배열을 필터링하고 컴포넌트 배열로 변환할 수 있다. filter(), map() 을 사용하기 위해서는 각 ..

보호되어 있는 글입니다.

최근에 개발자를 꿈꾸는 친오빠랑 개발에 대해서 이야기를 나누곤 했다. 어떻개 하면 조금 더 기본기를 챙기면서, 프론트엔드 개발을 꾸준히 할 수 있을지에 대한 이야기들을 나누게 되었다. 그러다가, 툭 튀어나온 한 가지가 바로 React 기본기를 공부하고, 이를 블로그로 기록하는 것이었다!! 사실 React 라이브러리를 사용한 웹 개발은 약 1년 반 정도 해왔지만, 사실 졸업 연구가 끝난 뒤로부터는 개발을 손에 잡기란 쉽지 않았고, 1일1커밋을 비롯하여 개발자로서 가져야 할 역량이나 흥미를 더욱 붙잡고 싶다는 생각이 들었다. 졸업까지 단 한 학기만 남은,, 취준을 해야 하는,, 내가 지금 처한 상황이 이렇다. 이제 졸업까지 약 한 학기 정도 남았고, 막학기를 보내면서 취준을 병행해야 하는데, 지금까지의 대..