반응형 react5 React Server Components (RSC) 웹 개발자라면 한 번쯤 느껴봤을 거예요. 클라이언트 사이드에서 무거운 컴포넌트를 렌더링할 때, 느려진 웹 페이지 속도와 복잡해지는 상태 관리. 이 문제를 해결할 수 있는 키워드가 바로 React Server Components (RSC)입니다. 2025년, 많은 프론트엔드 개발자들이 이 기술에 주목하고 있어요.그렇다면, RSC가 정확히 뭘 의미할까요? 그리고 왜 지금 이 시점에 중요한 기술로 떠오르고 있는 걸까요? 이번 글에서는 RSC의 개념부터 실전 활용 팁까지 간단하고 실용적으로 알려드릴게요.React Server Components 공식 문서 바로가기 클라이언트가 다 하던 시대는 끝났다기존의 React 애플리케이션은 대부분 클라이언트 사이드 렌더링(CSR)에 의존했어요. 즉, HTML은 일단 텅 .. 2025. 4. 13. useRef 로 특정 DOM 선택/컴포넌트 안의 변수 만들기 useRef로 DOM선택 함수형 컴포넌트에서 ref를 사용 할 때에는 useRef 라는 Hook 함수를 사용 import React, {useState, useRef} from 'react'; function InputSample(){ const [inputs, setInputs] = useState({ name:'', nickname:'' }); const nameInput = useRef(); const{name, nickname} = inputs; // 비구조할당 으로 값 추출 const onChange = (e) => { const {value, name} = e.target; // 우선 e.target 에서 name 과 value 를 추출 setInputs({ ...inputs, // 기존의 i.. 2020. 5. 21. input/ 여러개의 input input 사용자 입력 태그 관리 방법 InputSample.js import React, {useState} from 'react'; function InputSample(){ const [text,setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export default InputSample; App.js import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } expor.. 2020. 5. 21. props / 조건부 렌더링/ useState props 특정값을 전달하고자 할때 사용 App.js function App() { return ( ); } name , color >> props Hello.js function Hello({color, name}) { return 안녕하세요 {name}; //JSX } //default props Hello.defaultProps = { name: '이름없음' }; color name 파라미터로 받아옴 Props Childern Div안에 값이 아닌 어떤 컨퍼넌트 안의 값을 조회하기 위해 사용한다. App.js function App() { return ( ) } Wrapper.js function Wrapper({ children }) { const style = { border:'2px solid.. 2020. 5. 19. Jsx 내가 하는 React 정리 Babel jsx라는 문법을 사용하여 xml형태로 선언을 하면 javascript 형태로 변환하게 해주는 녀석 Jsx로 작성된 코드가 javascript로 제대로 작성 되기위한 준수사항 - 태그는 무조건 닫혀있어야 한다 - 2개이상의 테그는 꼭 하나의 테그로 감싸야 한다. 의미없는 를 넣는게 싫다면 프레그먼트 비어있는 태그를 사용한다 Jsx 내에서 Javascript 값을 보여줄 땐, { } 로 감싼다 function App() { const name ="react"; return ( {name} ); } 스타일을 설정을 넣어서 사용하고자 할때 객체를 작성 한다. html 처럼 Class를 사용하고 사용하고자 할땐 ClassName으로 사용한다 주석은 {/* 주석.. 2020. 5. 15. 이전 1 다음 반응형
