전체 글 (38) 썸네일형 리스트형 [웹 FE 스터디] THE BASICS OF REACT ~ 3.5 Inputs and State TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_서다원 ref : 노마드코더 React JS로 영화 웹서비스 만들기 React의 동작방식 React는 js로 element를 만들어 이를 html 안에 넣는 역할 담당 컴포넌트를 작성해도 앱을 실행했을때 소스보기에서는 해당 컴포넌트 내용이 안보임( root div만 보임) 그래서 가상돔(virtual DOM)이라고 함 -> 리액트가 빠른 이유 Component란 html을 반환하는 함수 ex : Javascript랑 html이 조합된걸 JSX라고 함 대문자로 시작해야! Reusable Component with JSX + Props JSX랑 props를 사용하면 컴포넌트끼리 정보를 보낼 수 있다. (단, 부모 -> 자식.. [React] Vanila JS vs React Js | JSX TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 38기_김민서 1. Vanila Js vs ReactJs 해당 강좌에서는 버튼을 눌렀을때 화면에 표출되는 숫자가 증가하는 단순한 예제로 두개를 비교해보았다. 먼저 Vanila JS의 코드이다 Total clicks: 0 Click me 한번에 보기위해 html파일안에 script 태그를 이용하여 JS 코드도 함께 합쳤다 코드의 큰 흐름을 보면 html 태그를 JS에서 querySelector나 getElementBy(id,class,등등)으로 요소를 가져와서(=선언해서) 이를 함수에서 다뤄주는 형식이다. 또한 html의 내용을 변경해주고 싶다면 이또한 앞서 선언해준 변수의 요소들(위의 코드의 경우 innerText)로 값을 변.. [웹 FE 스터디] React : 수정 ~ 삭제 기능 TAB 2022 2학기 학회활동 [팀 스터디] TIL 포스팅입니다. 작성자 : 40기_박지민 ref. 생활코딩 [React] 수정 (업데이트) 기능 ▶ 원시 데이터 타입 string, number, boolean, bigint, undefined, symbol, null ▶ 범 객체 object, array ▶ 객체 값의 수정 newValue = {...value} → value값 복제한 새로운 데이터가 newValue의 값이 됨. newValue 변경 후 setValue(newValue) → 컴포넌트 재실행 * 배열의 경우 {...value} 대신 [...value] 사용 ▶ 수정 시의 주의점 오리지널 데이터 변경 시 기존 데이터와 변경된 데이터가 같을 경우 컴포넌트는 다시 랜더링되지 않는다. cons.. 이전 1 2 3 4 5 6 7 ··· 13 다음