WINK-(Web & App)/React.js 스터디 (126) 썸네일형 리스트형 [2025 1학기 React.js 스터디] 이가인 #3주차 1. JSX 이해하기2. props 사용법3. 조건부랜더링4. useState : 동적인 값 관리하기5. input 상태 관리하기6. 여러개의 input 상태 관리 7. 과제 보여주깅 JSX리액트에서 생김새를 정의할 때 사용하는 문법- 리액트에서 컴포넌트를 만들 때 화면에 보일 구조를 쉽게 표현할 수 있게 도와줌return 안녕하세요; Babel 자바스크립트의 문법을 확장해주는 도구 JSX -> JS 변환 제대로 되기위한 규칙1. 닫혀잇는태그2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야함. -> 번거로움 -> Fragment(리액트요소) 사용 Fragment - - 별도의 엘리먼트로 나타나지않음 3. JSX 내부에 자바스크립트 변수 보여주기 { } 으로 감싸기 4. JSX 에서 태그에 .. [2025 1학기 React.js 스터디] 이종민 #3주차 리엑트가 만들어진 이유숙련된 JavaScript 개발자라면, 코드를 최대한 깔끔하게 정리하여 쉽게 유지보수를 할 수도 있겠지만, 대부분의 경우 웹 애플리케이션의 규모가 커지면, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉽습니다. 리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었습니다.우선 src 디렉터리에 Hello.js 파일을 작성했습니다.export default Hello;이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미입니다. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용 할 수 있습니다.Hello 컴포넌트를 .. [2025 1학기 React.js 스터디] 최은희 #3주차 #1. 리액트는 어쩌다 만들어지게 되었을까?dom을 직접 조작하면서 만든 웹앱은 규모가 커질수록 복잡해지는데,이를 효율적으로 다루기 위해 만들어짐. 상태가 변하면 그에 맞춰 자동으로 UI가 업데이트됨.=> 복잡한 웹 UI를 덜 복잡하고 효율적으로 만들기 위해 만들어짐! #3. 리액트 컴포넌트*컴포넌트: 화면에 보여줄 부분을 만드는 코드(예를 들면 버튼 하나, 헤더 메뉴, 카드 하나 등...) *컴포넌트를 만드는 방법1.함수형 컴포넌트2.클래스형 컴포넌 *JSM: 보기에는 html처럼 생겼지만 내부에서는 자바스크립트 코드로 변환시켜줌 *함수형 컴포넌트 만들기1. scr폴더 안에 컴포넌트용 .js 파일을 새로 만든다.2. 파일 안에 컴포넌트 코드를 작성한다.function MyComponent() { re.. [2025 1학기 React.js 스터디] 백채린 #3주차 1. 리액트는 어쩌다 만들어졌을까? 사용자와의 인터랙션이 자주 발생➡️ 처리해야 할 이벤트, 관리해야 할 상태값, DOM이 다양해지게 되고 규칙도 많이 복잡해짐➡️ Ember, Backbone, AngularJS 등의 프레임워크가 만들어짐* 이 프레임워크들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해서 업데이트 💡 상태가 바뀌었을 때, 아예 처음부터 새로 만들어서 보여주자는 아이디어에서 리액트가 시작❓ 근데 이러면 속도가 매우 느리게 되지 않나?? 그래서 리액트에서는 Virtual DOM을 사용함* 브라우저에 보여지는 DOM이 아닌 메모리에 가상으로 존재하는 DOM으로, JavaScript 객체이기 때문에 속도가 훨씬 빠름즉, DOM의 상태를 메모리에 저장하고, 변경 전과.. [2025 1학기 React.js 스터디] 한혜민 #3주차 ✅ 리액트는 어쩌다 만들어졌을까? 리액트를 본격적으로 배우기 전에, 이 라이브러리가 왜 만들어졌는지 먼저 알아보는 건 매우 중요합니다.JavaScript만으로 UI를 만들면 벌어지는 일초기에 우리가 웹에서 UI를 만들 때는 JavaScript와 HTML만으로 동적인 화면을 구성했습니다. 버튼 클릭 시 DOM을 직접 조작하여 값을 바꾸고, 이벤트에 따라 요소들을 추가하거나 제거하는 방식이었죠. 하지만 이렇게 작성된 코드는 점점 복잡해지고 유지보수가 어려워졌습니다. 상태가 많아지면 어디서 어떤 DOM을 조작했는지 추적하기 어려워졌고, 같은 UI를 다른 페이지나 상황에서도 반복해서 쓰고 싶을 때도 비효율적이었습니다. 그래서 나온 해결책, 리액트페이스북 개발팀은 이런 문제를 해결하기 위해 리액트를 만들었습니.. [2025 1학기 React.js 스터디] 정채은 #3주차 리액트를 버억 ~ 킹킹킹 ~ 1. 리액트 생성 이유 돔 관리를 위해그런데 돔 상태 바뀔 때, 다 날려버리고 새로 만들어서 보여주는거 어떨까 하는 생각 -> 리액트 진짜 날리면 답없어서 Virtual DOM 사용해서 가능하게 함 Virtual DOM : 가상 돔. 2. 개발환경 준비 으하하 저는 프로젝트를 한번 해보아서 ...작업환경이 세팅이 되어잇씁니다 !!! 우하하 !!! 저는 그리고 yarn 을 사용하지 않고 npm 이 익숙해서 npm 으로 하겟습니다. 3. 얌얌의 first 리액트 컴포넌트. import React from 'react';첫줄 : 리액트 불러오는 코드. export default Hello;마지막줄 : 컴포넌트 내보내겟다는 뜻 ReactDOM.render 의 역할 : .. [2025 1학기 React.js 스터디] 강민지 #3주차 3주차 리액트시~~작~!0. 리액트는 어쩌다 만들어졌을까?"DOM 업데이트를 어떻게 해야 할 지" (X)"Virtual DOM을 통해 처음부터 모든걸 새로 만들자" (O)1. 리액트 컴포넌트 만들기*컴포넌트 = UI를 구성하는 조각들 (1) begin-react > src > Hello.js 파일 만들기 (무조건 h는 대문자로!!)(2) 터미널에 npm start 입력 -> react app에 안녕하세요 출력(3) 다른 파일에 import Hello from './Hello'; 입력 -> 불러오기 기능ReactDOM.render : DOM 내부에 리액트 컴포넌트를 렌더링렌더링된 결과물 -> div 내부2. JSXbabel(문법 확장 도구)이 JSX 를 JavaScript 로 변환시킴: 브라우저는 JSX .. [2025 1학기 React.js 스터디] 이승준 #3주차 ✅ React.js가 탄생하게된 이유리액트가 탄생하게 된 이유에 대해서 작성해보겠습니다...0 +1 -1const number = document.getElementById('number');const increase = document.getElementById('increase');const decrease = document.getElementById('decrease');increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1;};decrease.onclick = () => { const current = parseInt(number.innerText, 10.. 이전 1 2 3 4 ··· 16 다음
