728x90 react21 19. 컴포넌트 이벤트 만들기 2 [생활코딩! React 리액트 프로그래밍] 우리는 Subject라는 컴포넌트의 onChangePage라고 하는 이벤트를 만들었습니다. 그리고 이벤트에 사용자가 함수를 설치하면 해당 이벤트가 발생했을 때, 즉 Subject 컴포넌트의 링크를 클릭했을 때 props로 전달된 onPageChange 라는 함수를 호출하면 됩니다. 그렇게 해서 경고창이 표시됐던 것 입니다. 그러면 이제 onChangePage 함수에서 state 값을 변경해보겠습니다. App 컴포넌트 내부의 Subject 컴포넌트 부분을 다음과 같이 작성해서 mode를 welcome으로 바꿔보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 class App extends Component{ return( ... 생략 ... cs 우리가 기대.. 2023. 3. 3. [React] React-Router-Dom 이번 프로젝트를 하면서 라우터의 개념에 대해 갈피를 잡지 못하여 다소 많은 시간을 써가며.. 삽질을 많이 했었습니다. 구글링하면서 많이 애를 먹었던게 글 마다 버전이 달라서 문법 차이로 인해 버그가 잦았었고, 구조에 대해서 알기까지 좀 오랜시간이 들었었습니다. 삽질 하면서 알게된 정보를 여기에 한번 써 보려고 합니다. 이 글에서는 현재 최신버전이 버전6을 기준으로 작성하였습니다. 라우팅을 구성하기 위해 사용하는 기본적인 컴포넌트는 BrowserRouter, Routes, Route 이렇게 3가지로 나뉘게 됩니다. 먼저 BrowserRouter 컴포넌트는 웹 브라우저에서 React-Router를 사용하여 라우팅을 할 수 있도록 해주는 컴포넌트 입니다. 웹 브라우저에는 history 라는 기능이 내장되어있는.. 2023. 2. 25. 18. 컴포넌트 이벤트 만들기 [생활코딩! React 리액트 프로그래밍] 이번 장에서는 굉장히 흥미로운 이야기를 해보겠습니다. 아마도 여러분은 지금까지 이벤트를 계속 사용해 왔을 것입니다. 그런데 태그의 이벤트를 직접 만들어서 해당 태그 또는 컴포넌트를 사용하는 사람들이 이벤트 프로그래밍을 할 수 있게 해본 적은 없을 것 입니다. 즉, 이벤트의 소비자였지 이벤트의 생산자였던 적은 없었을 것입니다. 이번시간에는 이벤트를 만드는 생산자가 되어 볼 것 입니다. 이전에 작성했던 코드를 한번 보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 {/**/} {this.state.subject.title} {this.state.subject.sub} Colored by Color Scripter cs 여기서 태그를 클릭했을 때.. 2023. 2. 20. 17. 이벤트 state props와 render 함수 4 [생활코딩! React 리액트 프로그래밍] 이번 시간에는 state 값을 직접 변경하면 안 되고 함수를 호출하는 형태로 변경해야 하는 이유를 설명하겠습니다. 다음과 같이 App 컴포넌트의 생성자, 즉constructor는 App 컴포넌트가 생성될 때 최초로 실행됩니다. 이때 this.state의 초깃값은 다음의 constructor에서 작성한 것 처럼 입력하면 됩니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 constructor(props) { super(props); this.state = { mode : 'read', subject : {title: "WEB", sub: 'World Wide Web!'}, welcome : {title: "Welcome", desc: 'Hello, Re.. 2023. 2. 14. 이전 1 2 3 4 ··· 6 다음 728x90