FECONF2025 톺아보기
소개
🚧 내용 작성중
FE conf 내용 정리
스벨트를 통해 리액트 더 잘 이해하기
리랜더링 방식의 차이
랜더링 방식에 있어서의 리액트와 스벨트의 차이 두 프레임워크의 상태관리를 통해 비교
리액트에서 어떤 상태를 변경하더라도 컴포넌트 전체가 재실행된다.
카운트 상태를 바꿔도 네임 상태를 바꿔도 useState에서는 모두 리랜더링
export default function example() {
const [count, setCount] = useState();
const [name, setName] = useState();
return (
<div>
<div>{count}</div>
<div>{name}</div>
</div>
);
}
스벨트의 구조 사용된곳만 업데이트하도록 되어있음
FGR이란 무엇인가
Fine-Granined Reactivity 이펙트와 옵저버블로 구현
상태가 변경될때 사용된 이펙트만 다시 실행
이펙트 함수 구현방식에 대한 설명
이펙트의 핵십요소 동적 추적 시스템 선택적 실행
옵저버블 클래스 구현 방식 설명
동적의존성 추적 겟 호출 시점에 이펙트를 자동으로 수집하여 의존성 그래프를 동적으로 구성
콜백 컬렉션 값을 사용하는 모든 이펙트를 콜백
스벨트의 $state 와 FGR 스벨트에서는 이런 반응성을 컴파일러를 통해 더욱 쉽게 사용
$state로 간편한 FGR 구현 방식 코드
스벨트 컴파일러 동작 방식에 대한 설명
스벨트 컴파일 결과 코드
리액트에서의 FGR Legend State
스벨트의 세밀한 반응성을 리액트에서도 적용할 수 있을까?
EXPO에서 공식 지원하는 FGR 라이브러리
사용 예시 코드
메모 컴포넌트 패턴, FGR 원리 적용
Dom 조작 패턴
이벤트 처리와 DOM조작방식의 차이
외부 클릭하면 닫히는 동작 예시
일반적인 구현방법
DOM요소 참조하기 useRef로 드롭다운이나 모달 요소 참조 추적
외부 클릭 판단 방법들
-
contains() 메서드로 클릭된 요소가 참조한 돔ㅇ내부인지 확인
-
이벤트 리스너 관리
-
useEffect로 사용
재사용 가능하게 한다면?
- 훅 방식
코드 예시
Handler와 DOM에 적용되는 로직이 분리되어있음 돔에 어떤 로직이 적용되어있는지 알기 어려움
컴포넌트 방식
시맨틱 태그가 드러나지 않아 가독성이 떨어지고 이게 헤더인지 섹션인지 넵바인지 구분 모호
스벨트에서는 어떻게 할까
use: direcitve로 dom 직접 조작
use: 지시어로 DOM에 직 접 기능을 추가
돔과 로직이 같은 위치 이해하기 쉽고 직관적
리엑트 ref 콜백 패턴에 적용한다면??
리액트에서 ref 는 useRef의 리턴값을 할당할 수 있는걸 넘어서 element의 생성과 소멸시점에 대한 콜백을 받을수있음 이를 홀용한 코드 예시
ref에 dom조작 콜백함수 응용
ref에 돔 조작 콜백함수를 넘기면서 응용한다면
react19의 ref 콜백 패턴
새로운 useOutside
애니메이션 구현
돔 요소 생성/ 소멸시 자연스러운 움직임을 부여하는 기법
리액트 트랜지션 구현의 현실
리액트에서 요소의 등장/ 퇴장 애니메이션을 외부 라이브러리에 의존해야함
기본 동작의 한계 리액트에서는 즉시 제거하기 때문
모션의 경우 모든 기능이 동작하지만 api 래핑이 복잡하고 어려움
스벨트의 내장 트랜지현과 api 스벨트는 트랜지션이 내장되어있어 애니메이션ㄴ을 쉽게 구현할 수 있다..
기본 트랜지션 별도 라이브러리 없이 사옹 가능
커스텀 트랜지션 정의
tick 값을 받아 설정할 수 있음
인 커스텀 아웃 커스텀을 사용하여 진입과 퇴장 따로 설정 가능
리액트에 적용 가능할까??
리액트 dom의 생성/소멸 시점을 감지할 수 있으니 이를 활요하여 구현할 수 있음
이런 hook도 가능하지 않을까/?
돔 생성 소멸 시점에 자연스러운 애니메이션 부여
ref에 transition 훅을 사용하여 인아웃 적용
스고이 라이브러리?
'memo'를 지울결심: React Compiler가 제안하는 미래
React Compiler러란?
react forget으로 개발 시작
ract conf 2024 정식 오픈
React compiler를 알아보기 전에 리액트 특성을 확인
리액트의 특성 부모 컴포넌트가 리랜더링 된다면 자식 컴포넌트도 리랜더링
기존의 메모이제이션 방식 useMemo, useCallback을 사용해서 관리
그렇다면 모든곳에 적용하면 좋지 않을까?
수동 메모이제이션의 한계
과도한 리소스 소모 의존성 배열 관리 코드의 본질이 가려짐
최 적화 코드가 너무 많아져 코드의 본래의도가 희석됨
어떤 기준을 가지고 메모이제이션 해야할까? 개발자가 메모이제이션을 신경쓰지 않아도 좋다면 어떨까?
-> React Compiler 등장
Readct Compiler 동작 방식
어떤 식으로 거쳐갈까
useMemoCache 훅이 생성된 사이즈를 입력 받아 fiber 노드 상에 저장된 배열형태의 캐시 저장
조건문을 통해 추가함
이때 심볼을 통해 캐시값들을 저장하며, 이에 대한 컴파일 결과 코드를 통해 발표자가 설명함
캐시의 첫번째 값과 심볼 비교 심볼을 이때 캐시의 초기값을 가져옴
if 문은 첫 랜더링 시 캐싱을 하는 과정
첫 랜더링 시 첫번째 값을 $[0]에 저장하고 이후 활용함
else는 리랜더링 될때 확인 하는 부분
사이즈 2의 캐시배열을 받는 텍스트 컴포넌트 예시
컬러가 다를 때 jsx반환 같다면 캐시 값을 그대로 씀
부모에 상태가 추가된다면?
App() 에 useState(0); 추가된다면
카운트가 증가하면 자식 요소가 다시 계산됨
자식에게 비싼 연산이 있다면 매번 재계산 되므로 메모이제이션을 활용했었음
컴파일러는 어떻게 동작할까??
텍스트의 경우 컬러가 다시 달라지지 않는 이상 다시 계산되지 않는다.
컴파일 과정 깊이 들어가기
컴파일? 트랜스파일??
컴파일이란 고수준의 언어에서 저수준으로 변환하는 과정이므로 트랜스파일러가 맞지않을까?
진입점
babel 을 통해 자바스크립트 코드를 파싱하여 추상 구문 트리로 변환 abstract syntax tree
HIR
AST는 코드의 구조를 나타낸다면 HIR은 코드의 실행 흐름을 나타낸다 실행단위인 블럭과 블럭사이의 엣지로 표현한다
블럭이라는 단위와 엣지라는 실행흐름
SSA
정적 단일 대입 각 변수가 단 한번만 할당되도록 제한하는 형식
재할당 되는 변수들을 버저닝 해준다
Reactive 분석
어떤 값들이 시간에따라 변할 수 있는 지 리액티브를 분석
함수 파라미터 프롭스 아규먼트 부모 컴포넌트에서 전달되어 언제든 변함
훅 호출 결과
전역 상태에 접근하는 값
이값에서 파생되는 값들
리액티브 값이란 리랜더링을 유발할 수 있는 잠재적인 값
리액티브 분석
어떤 값들이 시간에 따라 변할 수 있는지 분석
리액티브 스코프
영향을 받는 코드 영역을 그룹화
각 스코프를 기준으로 나뉘어 메모이제이션
다시 자바스크립트로 변환
HIR 형태에서 트리구조인 reactiveFunction으로 변환
다시 JavaScript 코드로 변환
컴파일이란 메모이제이션 과정에서 보듯 ~(못들음)
컴파일러의 한계와 우려
낙관적 가정, 번들 사이즈
낙관적 가정
컴파일된 코드가 예상과 다르게 동작할 때 발생하게된다
리액트 컴파일러는 기본적으로 Rules of React를 지켰다는 가정하에 이뤄지게됨
순수성을 위반한 코드들은 의도 하지 않은 동작이 발생 에러로 관측되지 않음
이를 방지할 방법은?
리액트의 규칙을 작 지키자
eslint 등 툴 활용
react forgive(experimental) 실험적기능
리액트 컴파일러를 Language Server 프로토콜로 사용하는 익스텐션
컴파일 결과를 미리 확인하거나 추론을 더 명확하게 해줌
번들 크기
리액트 컴파일러는 컴포넌트 단위의 코드 변환이 이뤄짐. 리액티브 값이 많을수록 변환된 코드양 증가
단순한 예제에서 컴포넌트 사이즈 2.28배 증가
복잡하고 코드 스플릿팅이 잘 되지 않았다면 크기가 증가하게됨
리액트 컴파일러 시대의 멘탈 모델
react as a language
리액트를 언어와도 같은 레벨로 취급하여 스트릭하게 룰을 잘 지킴
변화하는 값에 대한 이해
딸기 당근 수박 을 값으로 받는 컴포넌트
props를 통해 받았을때
직전값과 비교하므로 순회하는 경우 차이가 없음
if 문을 활용 시 같은 값이 들어오면 다시 계산하지 않음
리액티브 값의 중첩
첫번째는 밸류에 어떤값이 올지 모르므로 하나의 캐시에 모든 상태 중첩
두번째의 경우 각 분기마다 하나씩만 저장하므로 각 분기마다 캐시 하나씩 적용
앞으로 무엇에 집중해야할까???
수동 메모이제이션에서 해방 변화하는 값들이 어떻게 흐르는가 이해하고 접근하자
중요하지만 중요하지 않은 일, 그럼에도 계속해야하는 웹 접근성
웹접근성
웹 접근성이 무엇이고 어떻게 지원을 하는지
평소 고려했던 웹 접근성의 가치와 알게된 내용 공유
웹 접근성이란
접근성 지원은 늘 고려하는 사용자 중심 디자인의 다른 관점으로 해석할 수 있음
때로는 심미성 보다 접근성 고려가 우선
ARIA 란?
시멘틱 태그의 중요성 언급
웹 접근성이 UI 설계에 중요한 이유 ARIA css 규칙 설계 내용
css in js
react server components 로 인해 css in js 의 사용량 감소
개선하려 했지만 'use client' 를 추가한 방법으로 근본적으로 해결할 수 없음
kuma ui panda css -< zero runtime css
1년에 10억 원을 절약한, 강남언니의 SEO 웹 전략 공개
Tanstack query를 넘어 향해! 쿼리를 라우터까지 전파시키기
RSC 살펴보기
클라이언트까지 도달하지 않는 컴포넌트
서버자원을 효과적으로 사용ㅇ 서버환경동작
내부에서 비동기 연산 사용ㅇ
자식요소로 클라이언트 컴포넌트 사용가능
클라이언트 미도달?
전통적 ssr구조
spring ror flask 미리 html 로딩 후 클라이언트에서 그려줌
isomorphic component 서버와 클라인언트를 동일한 환경으로 하자
react server components 다시 분리
서버 자원 사용ㅇ
서버만 알고있는 정보를 분리하기 위해
서버자원 사용ㅇ
getServerSideProps 프레임워크에서 독립한 모든 리액트 프레임워크에서 사용하도록
컴포넌트 단위 ssg/ssr/isr의 시대
비동기 연산
hooks 대신 비동기 연산 사용
rule of hooks 는 이제 없다
await promise.all() 같은 함수를 편하게 사용
tanstack query로 rsc 제대로 사용
advanced server rendering 에서는
모노레포 절망편, 14개의 레포로 부활하기까지 걸린 1년
의존성 시각화 툴 찾아보기