개발자꿈나무

서론저번에 만들어놓은 모달창 레이아웃을 이용해서 동적 모달창 생성 방법에 대해 배웠다. 게시글을 누르면 상세페이지가 뜨도록 만들어주려고 한다.  본론동적 UI 생성 step 동적 UI를 생성하기 위해서는 3가지 단계만 거쳐주면 된다. 1. html / css로 미리 UI 디자인 생성2. UI의 현재 상태를 state로 저장3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성  본격적으로 모달창 띄우기 step.1 html과 css는 이미 작성을 해놨으므로 그대로 진행하도록 하겠다. step.2 UI의 현재 상태를 state로 저장해야한다. 모달의 현재 상태를 표현하는 건 어떤 방식이든 상관없으므로 나는 직관적으로 'close', 'open' 글자로 표현하였다. 0, 1 혹은 true, fals..

본론Component 생성 예를 들어 상세페이지를 나타내는 모달창을 하나 만든다고 가정했을 때, 태그를 이용해 레이아웃을 설정해줄 수 있다. 그런데 이렇게 하나하나 레이아웃을 만들고 있다보면 반복되는 부분이나 불필요한 가 많이 필요한 것을 확인할 수 있다. 실제로 개발자도구를 이용해 html 문서를 확인해봤을 때 무수히 많은 div들과 복잡한 코드를 볼 수가 있는데 이러한 복잡한 html을 한 단어로 치환할 수 있는 것이 바로 Component이다.  {title[2]} 2월 17일 발행{/* 모달 상세페이지 컴포넌트 생성 */} 제목 내용 상세내용{/* 한 단어로 치환 */} 실제로 모달 상세페이지를 만들기위한 기본적인 틀을 생성해준다면 저렇게 함수 안에 태그를 이용하여 줄줄이 작성해줬을 것이다...

서론저번 실습 과제를 하면서 array 타입의 state를 변경하는 함수에 대해서 공부해봤다. spread 문법을 쓰지 않고 그냥 array를 수정하게되면 state 변경함수가 제대로 작동하지 않는데 이 작동원리와 문법에 대해서 좀 더 자세히 공부했다.  본론state 변경함수 동작원리 간략하게 정리를 했었는데 다시 한번 살펴보자면 state 변경함수를 쓸 때먼저, 기존 state === 변경 state 검사를 진행한다. 이때 true가 나오게 되면 변경을 해주지 않고, false가 나올 때 state를 변경시켜 html을 재렌더링해준다.  이 부분을 조금 더 자세히 살펴보면 array/object 동작원리에 대해서 살펴봐야한다.자바스크립트는 array/object 자료를 생성하게 되면 RAM이라는 가상..

서론** 실습 코드 보완▶ 어제 진행했던 실습 문제 코드를 보완해보도록 하겠다.let [[title1, title2, title3], b] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);위처럼 title1, title2, title3 이렇게 쓸 필요없이 array 이므로 title[0], title[1], title[2]로 사용하면 훨씬 깔끔한 코드를 짤 수 있다. 그리고 태그를 쓴 부분은 굳이 이렇게 쓸 필요가 없을 것 같아 로 수정해줬다.let [title, b] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( {/* 상단메뉴 만들기 */} ReactBlog ..

서론오늘은 state에 관한 개념을 익힐 것이다. 보통 데이터를 저장할 때 변수를 사용하는데 변수외에 사용할 수 있는 개념이 state이다. 그럼 이 state를 사용하는 이유와 어떤 경우에 사용하는 것이 좋을지 알아보도록 하겠다.  본론state 생성하기import { useState } from 'react';function App() { let [a, b] = useState('남자코트 추천'); return ( {/* 상단메뉴 만들기 */} ReactBlog {/* 블로그 글 리스트 만들기 */} { a } 2월 17일 발행 );} 리액트에서는 변수 말고 state에 데이터를 저장..

서론오늘은 JSX의 대표적인 문법 3개에 대해 배웠다. JSX란 리액트에서 사용하는 언어로 html과 사용방식은 비슷하지만 훨씬 편하게 코드를 짤 수 있도록 해주는 언어이다. 가장 기본 문법 3가지에 대해 알아보겠다.  본론1. class 아닌 className ! 블로그를 만들기 위해 상단바를 제작해볼 것이다. html과 똑같이 를 이용해 레이아웃을 설정해주면 된다. 기본 틀을 잡아놓은 후에 상단바를 검은색으로 글자를 흰색으로 설정할 것이다. css 스타일은 App.css 파일 열어서 똑같이 써주면 된다.import logo from './logo.svg';import './App.css';//아래 언어는 사실 html이 아니라 JSXfunction App() { return ( {..