C-log

우리는 컴포넌트 외부에서 내부로 값을 전달하는 정도만 배웠다. 하지만 내부에서 외부로 전달이 필요하다 느꼈다. 아래 코드를 살펴보자. *App.js import { useState } from 'react'; import './App.css'; import Calculate from "./section/training/Calculate" function App() { const [result, setResult] = useState() const handleShow = (show) => { console.log("show", show); setResult(show) } return ( {result} ); } export default App; 오로지 app컴포넌트에서 calculate 컴포넌트만을 사용..

해당 수업을 마치고 작게 프로젝트를 스스로 진행 해보려고 한다. 단순한 계산기를 만들어내는 것이다. 결과는 단순해 보일 수 있겠지만 아주 많은 공부가 될 것이다. 특히 useState와 컴포넌트의 구조를 생각하며 만들어 낼 것이다. 아래 링크는 이와 비슷한 결과물이 나올 예시이다. 아마도 아래와 같은 코드는 작성하진 않을 것이다. 본인이 생각한 방식대로 작성 할 것이다. [React] 리액트로 계산기 만들기 CSS를 사용할때 주로 sass를 썼었다, styled-component도 연습하면서 css grid에 대해서도 공부해보고 싶었다. 뭐가 좋을지 고민하다가 계산기 UI가 떠올랐고 내친김에 구현까지 해보았다. velog.io

마지막으로 우리는 Delete를 구현할 것이다. 그러기 위해서는 기존에 update부분에서 delete를 추가할 것이다. 이전에는 a태그를 사용했지만 이번에는 우리가 페이지를 새로 생성하거나 불러오는 것이 아니기때문에 input태그로 버튼을 구현 할 것이다. 따라서 contextControl변수에서 값을 수정하면 된다. 아래 코드를 살펴보자. contextControl = { event.preventDefault(); setMode('UPDATE'); }}>Update { const newTopics = [] //비어있는 배열 값을 넣어준다. for (let i = 0; i 이 태그는 비어 있는 태그이지만 update와 delete태그들을 묶어주기 위함이다. 이에 따라서 onClick함수를 보면 newT..

이번 시간에는 Update를 하는 방법을 배울 것이다. 포스팅을 하기 앞서 우리는 id값을 전달 받고 있는 Nav컴포넌트를 명확하게 파악해야한다. 그래서 Nav 컴포넌트를 다시 한번 짚어보고 Update 포스팅을 할 것이다. 아래 Nav컴포넌트를 살펴보자. function Nav(props) {//리스트 const lis = [] for (let i = 0; i {t.title} ) } return {lis} } function App() { ... const [topics, setTopics] = useState([ { id: 1, title: 'html', body: 'html is..' }, { id: 2, title: 'css', body: 'css is..' }, { id: 3, title: '..

이번 수업에는 Create컴포넌트를 생성할 것이다. Create컴포넌트를 사용하기 위해서는 props와 useState를 잘이해해야한다. useState는 현재의 상태를 컨트롤 할 수 있는 역할이다. 우선 App컴포넌트를 살표보자 function App() { //조작하고 있는 장치 const [mode, setMode] = useState('WELCOME'); const [id, setId] = useState(null); const [nextId, setNextId] = useState(4); const [topics, setTopics] = useState([ { id: 1, title: 'html', body: 'html is..' }, { id: 2, title: 'css', body: 'css..

이번 시간에 우리는 state를 배우게 되었다. 우선 state가 필요한 이유를 설명하기 위해 아래 코드를 먼저 살펴보자 function App() { const mode = 'WELCOME'//event가 발생 했을 때 변경되는 변수 값 const topics = [ { id: 1, title: 'html', body: 'html is..' }, { id: 2, title: 'css', body: 'css is..' }, { id: 3, title: 'javascript', body: 'javascript is..' } ] return ( { mode = 'WELCOME'; }}> { mode = 'READ'; }}> ); } export default App; //contact App_7.js 해당 ..

props를 이용하는 방법을 앞시간에 배웠다. 이제는 함수를 이용해서 event처리를 하는 방법을 배우 볼 것이다. 우선 함수를 구현하는 방법은 Header 컴포넌트로 예시를 들어보면 아래와 같다. ... { alert('Header'); console.log('test') } }> ... 우선 우리가 만든 Headr 컴포넌트에 onChangeMode라는 함수를 넣어주고 onChangeMode함수를 props를 컨트롤 할 수 있는 Header컴포넌트로 돌아가서 onChangeMode를 실행시키면 된다. props를 컨트롤 할 수 있는 Header컴포넌트는 아래와 같다. function Header(props) { return section04 { event.preventDefault(); props.on..

이번 시간에는 props를 사용해서 태들을 동적으로 사용할 수 있게 할 것이다. 먼저 우리가 만든 App 컴포넌트를 보자. function App() { return ( ); } 각자 필요한 태그들을 컴포넌트를 사용해서 우리들만의 태그를 생성했다. 여기에 우리는 props를 사용해서 웹브라우저에 나타나는 태그들을 동적으로 줄 것이다. 컴포넌트에 props를 적용하려면 우선 아래와 같아야 한다. function App() { return ( ); } 이렇게 작성한 App컴포넌트를 Header부분의 컴포넌트에 propos를 부여 했을 때의 코드를 살펴보자. function Header(props) { console.log(props) return section04 WEB } 결과는 우리가 App컴포넌트에 기..