본문 바로가기

나야, 리액트 스터디

 (42)
[week3]- 이벤트처리 안녕하세요! YB 이윤지 입니다.ㅎㅎ이번 주차는 이벤트처리와 useState에 대해서 공부해봤는데요! 그 중에서도 이벤트 처리에 대해서 정리해봤습니다 😊레쓰고~~ *모든 내용은 React 공식문서를 기반으로 작성되었습니다. 1. 이벤트 핸들러이벤트 핸들러는 클릭, 마우스 호버, 폼 인풋 포커스 등 사용자의 상호작용에 따라 유발되는 사용자 정의 함수이다.다음과 같이 함수를 정의하고 3단계를 거칩니다.1. Button 컴포넌트 내부에 handleClick 함수 선언하기2. 해당 함수 내부 로직 구현하기 -> 여기서는 이벤트 메세지를 표시하기 위해 alert 사용3. JSX에 onclick={handleClick} 추가. 여기서! 바로 handleClick 이 이벤트 핸들러 주로 컴포넌트 내부에서 정의되며..
[week3] - 이벤트에 응답하기, State: 컴포넌트의 기억 저장소, 랜더링 그리고 커밋, 스냅샷으로서의 state 안녕하세요 웹파트 YB 한수정입니다!벌써 3주차가 밝았습니다. 이번 주는 이벤트에 응답하기, State: 컴포넌트의 기억 저장소, 랜더링 그리고 커밋, 스냅샷으로서의 state에 대해 공부하고 정리해보는 주입니다! 공식 문서를 보며 공부해보니, State는 React에서 매우 중요한 개념으로, 모든 컴포넌트의 동작과 데이터 관리에 깊이 연관되어 있음을 느꼈습니다. 그래서 타이틀에 state가 들어가 있는 State: 컴포넌트의 기억 저장소와 스냅샷으로서의 state에 대한 개념을 한 번 더 정리하려고 합니다! State: 컴포넌트의 기억 저장소State는 React에서 컴포넌트가 "기억"해야 하는 데이터를 의미합니다. 사용자의 상호작용에 따라 화면 내용을 변경하기 위해 필요한 정보들, 예를 들어 현재 입..
[week3] 이벤트 핸들러 및 전파, State 안녕하세요! 물결웹팟 OB 박채연입니다 😋 이번주차엔 이벤트 및 State에 관련된 내용을 공부했는데요,간단한 상태를 다루는 주차라 공식문서의 모든 내용보단 제가 잘 모르고 넘어갔던 내용들을 깊게 파보고자 해봤습니다! 우리가 프로젝트 만들 때 수많은 상태를 만들고 사용하는데,막상 state에 대해 깊게 찾아보고 공부한 적은 없는 것 같더라구요 -!그래서 이번주, 다음주 동안 state에 대해 자세히 알아보면서 리액트에 더더욱 딥다이브 해보면 좋을 것 같습니다 💨     📍 이벤트 핸들러클릭, 마우스 호버, 폼 인풋 포커스 등 사용자 사용작용에 따라 유발되는 사용자 정의 함수 이벤트 핸들러로 전달한 함수들은 호출이 아닌 전달이 되어야 한다.함수를 전달하면 사용자가 버튼을 클릭했을 때만 함수를 호출하지..
[week3]상호작용성 더하기 - 이벤트에 응답하기, State: 컴포넌트의 기억 저장소, 랜더링 그리고 커밋, 스냅샷으로서의 state 더보기안녕하세요! 웹파트 OB 김건휘입니다. 이번 시간에는 리액트 공식문서 - 상호작용성 더하기 - (이벤트에 응답하기, State: 컴포넌트의 기억 저장소, 랜더링 그리고 커밋, 스냅샷으로서의 state)내용 중에서 궁금한 부분 딥다이브 및 요약에 대한 아티클을 작성해보겠습니다. 이벤트에 응답하기"이벤트에 응답하기"의 내용 중 e.preventDefault()에 대한 설명을 위해, 태그의 기본 동작에 대한 설명이 있었다. 사실 이전에도 , 과 같은 대표적인 HTML 요소들의 기본동작은 어느정도 알고 있었는데, 다양한 HTML 요소들의 기본동작에 대해서 알아보고 싶어서 공부하게 되었다. 📌HTML 요소들의 기본동작  (링크 태그):href 속성에 지정된 URL로 이동하는 것이 기본 동작이다. 클릭 시 ..
[week3] useState,,, 제대로 알고 계신가요?! 안녕하세요 웹파트 YB 김다현입니다. 이번 3주차에서는 useState에 대해 다뤄보려고 합니다. 리액트로 개발을 하다보면 useState를 수도 없이 쓰게 되는데요!생각해보니까 그냥 기계적으로 쓰기만 했지 뭔가 이게 뭐 어떻게 작동되는 건지,,, 그런 건 아예 모르는 상태더라구요.그리고 우선 저는 딱 읽자마자 '일반 변수로 충분하지 않은 경우' 라는 제목부터 이해가 잘 안 갔기 때문에 ㅎㅎ...지금이 리액트의 핵심 개념 중 하나인 상태 관리의 의미와 역할을 이해할 수 있는 기회라고 생각해 이 부분에 대해 작성하게 되었습니다.오늘도 공식문서를 쉽게! 최대한 누구나 이해할 수 있게! 아티클을 작성해볼게요 😅 다 이해하고 나면 되게 당연한 것 같기도 하고 후루룩 넘길 수 있는 챕터였던 것 같은데 저는 처음..
[week 3] state 알아보기 안녕하세요 YB 김가현입니다 ~! 😋이번 3주차는 상호작용성 더하기 파트에서 이벤트에 응답하기, State: 컴포넌트의 기억 저장소, 렌더링 그리고 커밋, 스냅샷으로서의 state 부분에 대해 읽어보았는데요 ! 읽으면서 매일 useState를 쓰면서도 잘 모르고 쓰고 있었구나 … 라는 생각을 하게 되었습니다 ……….🙀🙀🙀 그래서 state와 관련된 부분들을 공부해본 내용들을 정리해보았습니다State ?리액트에서 컴포넌트는 변화하는 데이터를 기억하고 관리할 수 있어야 한다 ! 예를 들어, 폼에 텍스트를 입력할 때 입력한 값이 즉시 화면에 반영되거나, 구매 버튼을 클릭하면 상품이 장바구니에 담긴다던가 … 등등 동적으로 변하는 데이터를 관리할 수 있어야 한다.이렇게 컴포넌트에서 동적인 값을 state ..
[week2] 리액트의 트리구조 안녕하세요! YB 이윤지 입니다 :)이번 주차 스터디 범위가 순수 컴포넌트, 트리, 조건부 랜더링과 리스트 랜더링이었는데요.이 중에서 저에게 가장 생소했던 트리 구조 위주로 이번 주차 아티클을 작성해보려고 합니다! *이 아티클은 리액트 공식문서를 바탕으로 작성되었습니다. React 앱은 서로 중첩된 많은 "컴포넌트" 로 구성되어 있단 것, 이제 다들 아실텐데요.ㅎㅎ 트리로서의 UI 트리는 요소와 UI 사이의 관계 모델이며 UI는 종종 트리 구조를 사용하여 표현됩니다.  예를 들어, 브라우저는 HTML(DOM)과 CSS 를 모델링 하기 위해 트리 구조를 사용하고, 모바일 플랫폼도 뷰 계층 구조를 나타내는 데 트리를 사용합니다. 그렇다면 트리는 왜 사용할까요?트리는 React 앱에서 데이터가 흐르는 방식과 ..
[week2] 컴포넌트의 순수성 안녕하세요! 웹파트 OB 박채연입니다! 😇나리스 2주차 아티클 주제로 순수 컴포넌트, 조건부 렌더링, 리스트 렌더링 등이 있었는데요.이번주차 아티클에서 저는 ‘컴포넌트의 순수성’을 주제로 아티클을 작성해보고자 합니다.컴포넌트의 순수성 ..? 이란 말을 처음 들었을 때, 대체 무슨 말인지 갈피도 잡히지 않았었는데요 ..그래서 이번주차 아티클을 작성하면서 순수 함수는 무엇이고, 리액트는 왜 순수해야 하는 건지 공부해보고자 합니다!그럼 바로 가볼까요 💨 순수 함수 외부 상태에 의존하지 않고, 외부 상태를 변경하지 않으며, 같은 입력에 대해 항상 같은 출력을 반환하는 함수를 말합니다.순수함수의 조건에 대해 정리해보면, 다음과 같습니다. 1️⃣ 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경되지 않는다..

티스토리툴바