728x90 반응형 컴포넌트3 [React.js] 5주차 - Counter 만들기, useEffect 1. Counter 만들어보기 Viewer 컴포넌트는 count 값을 보여주고 있고, Controller 컴포넌트는 count 값을 증가시킬 수 있는 버튼을 가지고 있다. 두 컴포넌트는 state 변수인 count 를 공유하고 있는데, Viewer 와 Controller 컴포넌트는 병렬적인 관계이기 때문에 props 공유가 불가능하다. 그래서 두 컴포넌트의 부모 컴포넌트인 App 컴포넌트에 state 변수를 두고 자식 컴포넌트인 Viewer, Controller 컴포넌트에 count 변수를 공유해준다. 이렇게 공유되는 state 를 계층 구조의 맨 위로 끌어올려 아래 컴포넌트들이 모두 공유할 수 있도록 만드는 것을 State Lifting 이라고 한다. 리액트에서 데이터는 위에서 아래로 단방향으로 흐르기.. 2024. 11. 4. [React.js] 3주차 - React.js 입문(1) 1. React 컴포넌트리액트에서는 HTML 태그를 반환하는 함수를 컴포넌트라고 하며, 보통 함수의 이름을 따서 부른다. 컴포넌트는 함수 선언식이나 화살표 함수를 사용해 만들 수 있다. 컴포넌트를 만들 때 컴포넌트 이름의 첫글자는 꼭 대문자로 적어줘야 하는데, 그렇지 않으면 리액트 내부적으로 컴포넌트로 인식하지 않기 때문이다. // 함수 선언식function Header() { return ( header );}// 화살표 함수const Header = () => { return ( header );} 2. JSX (JavaScript Extensions) 리액트는 jsx 즉, 확장된 자바스크립트의 문법을 사용하기 때문에 자바스크립트에서는 불가능.. 2024. 10. 14. [React+JS/리액트] 웹 스터디 4주차 class 컴포넌트 만드는 법 최근에는 컴포넌트를 만들 때 function 을 사용해 만들지만, 예전 리액트에서는 class 문법을 사용해 만들었다. function 사용을 권장하지만, 예전 버전의 리액트 프로젝트를 마주칠 수 있으니 가볍게 공부해 보자. class 문법으로 컴포넌트 만드는 법class Modal2 extends React.Component { constructor(){ super() } render(){ return ( 안녕 ) }} 1. 클래스명을 작성2. constructor, super, render 함수를 채워 넣어야 함 -> 무조건 필요한 기본 템플릿이라고 생각하면 된다.3. 컴포넌트는 길고 복잡한 html 을 축약할 때 쓰기 때문에 retur.. 2024. 5. 16. 이전 1 다음 728x90 반응형
