본문 바로가기

분류 전체보기

 (200)
[Week 5] SSR과 RSC 1. SSR (Server-Side Rendering)SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 클라이언트 단이 아닌 서버에서 이루어지는 아키텍처를 말한다.하지만, 일반적으로 지금의 SSR은 첫 HTML 렌더링은 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리하는 하이브리드 형태의 SSR을 가리킨다. CSR (Client-Side Rendering)과 SSR의 비교  기존에는 CSR (Client-Side Rendering) 방식이 보편적이었다. CSR이란 Client Side Rendering의 약자로, 사용자의 화면에 JavaScript 번들이 모두 다운로드된 후 첫 렌더링이 실행되고, 인증 및 데이터 요청과 같은 과정이 뒤따르는 방식이다. 하지만, 이 ..
[5주차 React-Hook-Form 📄] Zod와 여러가지 유틸리티 훅들 안녕하세요! 웹 YB 강민하입니다 ^^ React Hook Form을 맛있게 사용해보기 위한 여러가지 유틸리티 훅들과타입스크립트와 결합하여 강력한 유효성검사 시너지를 내는 Zod 라이브러리, 그리고 리훅폼과 함께 쓰는 방법에대해서 아티클 작성했습니다! 노션 글 첨부합니다 ~! https://inexpensive-tugboat-abb.notion.site/React-Hook-Form-Zod-149f7466fe4a80d4bf2bf7edf0b1959a?pvs=4
[5주차 React-Hook-Form 📄] 폼 기본 구성과 유효성 검사 안녕하세요! 물결웹팟 OB 박채연입니다 😋 이번주 호기심스에선 폼 데이터를 손쉽게 다룰 수 있는 React-Hook-Form에 대해 알아보는 시간을 가졌는데요!저는 그 중에서도, 기본적인 폼 구성과 유효성 검사 부분을 담당해서, 해당 부분 정리한 노션 올립니다 ! 🍥 이따 스터디 시간에 만나용 🙂  https://chaeneey.notion.site/React-Hook-Form-4e0715664fe140be9064cc0019f9703c?pvs=4 React-Hook-Form [폼 기본 구성과 유효성 검사] | NotionReact Hook Formchaeneey.notion.site
[week5] state 관리하기 안녕하세요! 물결웹팟 OB 박채연입니다 😞  리액트는 state를 통해 동적인 UI를 쉽게 관리할 수가 있는데요,그래서 이번주엔 State를 사용해 Input 다루기, State 구조 선택하기, 컴포넌트 간 State 공유하기, State를 보존하고 초기화하기 부분을 읽고, 리액트 state를 다시 정복해보려 합니다 !-! 오늘은 제 state가 시들시들해서 호다닥 시작해볼게요 ..    📍 State를 사용해 Input 다루기입력 필드의 값은 일반적으로 컴포넌트의 State로 관리합니다!이를 통해 사용자가 입력한 값을 실시간으로 추적할 수 있고,양방향 데이터 바인딩을 구현하지 않더라도 React의 단방향 데이터 흐름을 유지할 수 있습니다. 입력 필드의 value를 컴포넌트 State에 연결하고,on..
[week5] 컴포넌트 간 state 공유 안녕하세요 웹 YB 김다현입니다.거의 밤 새고 솝커톤 갔다가 약속까지 갔다오니,,, 너덜너덜해져서 결국 당일에 마감 직전에 아티클을 쓰게 됐네요 ㅠ,ㅠ다들 바쁜 와중에도 열심히 공부하는 모습 보니 넘 머싯고 그렇타 ,,, !!!아니 지금 보니까 저 오늘 발표네요 .......... 어쨌든 이번주차엔 input 다루기, state 구조 선택, 컴포넌트 간 state 공유, state 보존/초기화에 대해 공부해봤는데요. 저는 오늘 컴포넌트 간 state 공유에 대해 아티클을 써보려고 합니다!🖇 state 끌어올리기란?리액트를 쓰다 보면 두 컴포넌트가 같은 정보를 가지고 있어야 할 때가 있습니다.예를 들어 한 컴포넌트에서 버튼을 클릭했을 때 다른 컴포넌트에도 변화가 생기기를 원한다고 해볼게요.이럴 땐 두 컴..
[week5] 선언적 방식, 불필요한 상태 없애기, key를 이용해 state 초기화하기, Props를 state에 미러링X 안녕하세요🌊 웹파트 OB 김건휘입니다. 이번 시간에는 리액트 공식문서의 State 관리하기하기 파트 중 선언적 방식, 불필요한 상태 없애기, key를 이용해 state 초기화하기에 대한 저의 경험을 바탕으로 이야기해보는 시간을 갖도록 하겠습니다. 📌State를 사용해 Input 다루기해당 챕터의 핵심 내용은 "선언적 방식으로 UI 설계"라고 할 수 있는데요.  🧐선언적 방식이 뭔데??React는 선언적인 프로그래밍(declarative programming)을 핵심 철학으로 삼고 있다. 이는 "어떻게(how)" UI를 구현할지 상세히 설명하기보다는, "무엇(what)"을 보여줘야 하는지에 집중하는 방식이라고 할 수 있다. ✅선언적 방식 vs 명령적 방식명령적 방식 (Imperative)UI를 구성하..
[week 5] state를 보존하고 초기화하기 안녕하세요 ? YB 김가현입니다일주일이 너무 빠르네요 ……. 전 솝커톤도 안(못)했는데 왜이렇게 바쁜지 모르겠습니다 ….. 5주차에는 state를 잘 구조화하는 방법, props, 리액트가 state를 제어하는 방법과 관련된 내용에 대해 알 수 있었는데요 ~! 비교적 낯설었던 내용인 State를 보존하고 초기화하기 부분을 위주로 공부한 내용을 정리해보았습니다 React는 JSX 구조를 기반으로 렌더 트리를 만든다.그렇다면, 컴포넌트에 state를 줄 때 state는 렌더 트리의 어디에 위치할까 ?State는 렌더 트리의 위치에 연결된다.컴포넌트 내부에 state가 존재하는 줄 알았다. 완전 착각이었음 …React는 UI 트리에서 해당 컴포넌트가 어디에 위치하는지에 따라 React가 관리하는 state를 ..
[week5] State 관리하기 안녕하세요 웹 YB 이윤지 입니다.ㅎㅎ이번 주차가 정말 세미나에 합세에 솝커톤에... 정말 뭐가 많았죠.레전드 정신없었지만 그래도 나리스는 빼먹을 수 없죠.바로 가겠습니다. 렛츠기 State를 이용해 input 다루기 선언형 UI 와 명령형 UI 비교 명령형은 말 그대로 '명령' 하는 것.ex) 택시 운전기사는 내가 어디로 가고 싶어하는지 몰라요. 그저 내가 가달라는 곳으로 데려다 주실 뿐...술에 취해서 이상한 목적지를 말해도 그쪽으로 데려다 주실거예요! 이렇게 컴퓨터에게 스피너부터 버튼까지 각각의 요소에 UI를 어떻게! 업데이트 해야할지 '명령' 을 내리는 것이 명령형 하지만 코딩을 할 때 난 여기를 이렇게 하고 싶고 저렇게 하고싶고...주절주절 말하는 것은 미래를 생각했을 때 그닥 좋은 방법은 아니..

티스토리툴바