[React] 3. 상태 (State) [Props와 이어집니다.]

리액트는 대부분 use 로 시작하는데 그 중에서 useState 는 상태를 의미하며 컴포넌트에서 "동적"인 데이터를 관리하는 기능입니다.  즉 컴포넌트의 상태가 바뀌면 리렌더링이 발생합니다 (새로고침)그렇기 때문에 남발하게 되면 안됩니다..  선언 자체도 스프링에서 데이터 업데이트하는 것과 비슷합니다.const [???, set???] = useState(); 이런 구조로 많이 되어 있습니다.  앞에서 말한 예시에서 setState 를 사용하지 않고 오로지 props 를 사용하게 되면 변경이 안 되기 때문에 들고 있는 값을 그대로 가져옵니다 ( 버튼 같은 경우 계속 초기값을 가짐 )하지만 state는 입력 받은 값 을 const[count, setcount] = useState();  기준으로 count..

• format_list_bulleted JavaScript/React
• · 2025. 2. 12.
• textsms

[React] 2. 속성 (Props)

Component 는 React 에서 html 태그를 가지고 있는 블록이라고 설명 했는데 여기서각각의 블록은 상태 (State) 를 가지게 됩니다.그리고 부모 컴포넌트가 가진 데이터를 속성(Props) 를 통해 자식 컴포넌트에게 전송 할 수 있습니다.하지만 위에 그린 그림처럼 화살표는 무조건 위에서 아래로만 갑니다. (리듀서 or 리덕스를 사용하게 되면 조금 다릅니다.)즉, 속성(Props)은 부모에서 자식 컴포넌트 방향으로만 가는 단방향 데이터이며,또한 자식 컴포넌트는 부모에게 받은 Props를 수정 할 수 없습니다 (readonly)또한 객체 형태로 전송하기에 여러 값을 보낼 수 있습니다.간단하게 짜보면최상위 App 컴포넌트에서 하위 컴포넌트인 Profile 이라는 컴포넌트에게 data 라는 key로..

• format_list_bulleted JavaScript/React
• · 2025. 2. 12.
• textsms

[React] 0. 세팅

우선 자바스크립트 계열들은 vscode 를 많이 쓰기 때문에 vscode 먼저 다운 받고 node.js 까지 받았다는 전제하에 (만약 없다면 .. https://nodejs.org/ko 가셔서 node.js 다운 )( https://code.visualstudio.com/Download 가셔서 vscode 다운) 1. vite  터미널에 2가지 방법으로 프로젝트를 생성 할 수 있습니다 .  첫 번쨰는 npx create-react-app 프로젝트명두 번쨰는 create vite@latest ( 만약 powershell 을 통한 터미널인 경우 npx create-vite@latest ) 둘의 차이는 npx 같은 경우엔 Webpack vite 같은 경우엔 ESBuild 를 사용해서 번들링을 진행하게 되는데 ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 7.
• textsms