C-log

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

이번 수업 시간은 본격적인 실습을 하는 수업이다. 여기서 우리는 컴포넌트를 3개를 만들어야한다. 우선 App에서 랜더링이 되는 ClassApp.js파일을 살펴보자.(참고로 css파일은 index.js파일에 import해둔 상태이다. index.css와 data.js는 해당 강의의 강의 자료에서 살펴볼 수 있다.) * ClassApp.js import Day from "./component/Day"; import DayList from "./component/DayList"; import Header from "./component/Header"; function ClassApp() { return ( ); } export default ClassApp; 구성은 이렇게 되어 있다. Header컴포넌트는 별..

이번 시간에는 props를 사용할 것이다. props는 우리가 직접 설정한 값을 함수로 가져와서 변형하고 응용해서 다시 값을 넘겨주는 역할을 한다. 기본적인 형태만 보아서는 단순해 보이지만 응용했을 때는 복잡하고 머리아프다. 따라서 props의 역할과 props를 응용했을 때 어떻게 사용될지를 생각하면서 해당 수업을 들으면 더 질좋은 강의 시간이 될 것이다. 아래 코드를 살펴보자 *App.js import Class_App from "./section/section08/Class_App"; function App() { return ( ... *Class_App.js import { useState } from "react"; function Class_App( props ) { const [name, ..

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

이전 포스팅에 코드상 문제가 있어서 다시 포스팅을 한다. 더보기 삽입 정렬은 앞과 뒤를 비교하여 작은 값을 좌측으로 삽입시키는 방식이다. 그래서 i는 두 번째 for문의 범위의 기준을 정하는 범위이기에 1부터 시작을 한다. 그리고 j의 값은 i-1인 좌측 앞부분의 값을 가지고와 역순으로 진행을 한다. array = [7, 5, 9, 0, 3, 1, 6, 2, 4, 8] for i in range(1, len(array)): print(f"[{i}]") for j in range(i-1, 0, -1): # 왜 역순인지 이해가 안감.. # print(j) print(f"{array[j]}

React Hook API중 상태를 관리하는 useState를 알아보려고 한다. 상태값을 전달해서 해당 상태의 값의 변동으로 React가 웹 브라우저를 랜더링 시킬 수 있다. useState를 활용해서 다양한 형태의 코드를 살펴 보려한다. 우선 내가 작성한 useState는 아래와 같다. import { useState } from "react"; function Class_App() { const [name, setName] = useState("Mike"); function changeName() { if (name === "Mike") { setName("Jane") } else if (name === "Jane") { setName("Mike") } } return ( state {name} Ch..

이번 시간에는 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..