JAEJAE imojeomo

✏️ Props - 부모 컴포넌트의 state를 props 문법을 이용해 자식 컴포넌트로 전송하면 자식도 사용 가능. ✏️ props로 부모 → 자식 state 전송하는 법 1. 자식 컴포넌트 사용하는 곳에 가서 2. 자식 컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props. 작명 이용 💁‍♀️ 예시 function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } // props 등록 function Modal(props){ return ( { props.글제목[0] } 날짜 상세내용 ) } ✏️ props는 함수 파라미터 문법과 똑같다! function Modal(prop..

✏️ 번외) fragment 문법 return( ) - HTML 코드를 짤 때, return() 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 함! - 그래서 굳이 두개를 나란히 적고 싶으면 위와 같이 하나의 div로 또 감싸거나, 로 감싸야 함! ✏️ Component - 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법 function App (){ return ( (생략) ) } function Modal(){ return ( 제목 날짜 상세내용 ) } 1) 줄이는 법 1. function을 이용해 함수를 하나 만들고 작명. 2. 그 함수 안에 return() 안에 축약을 원하는 HTML 담음. 3. 그럼 원하는 곳에서 사용하면 아까 축약한 HTML 등장. - 이렇게 축약한 HTM..

💁‍♀️ 블로그 글 초기 레이아웃 function App(){ let posts = '강남 우동 맛집'; return ( 개발 blog 글제목 2월 17일 발행 ) } (App.css) div { box-sizing : border-box } .list { text-align : left; padding-left : 20px; border-bottom : 1px solid grey; } ✏️ state 만드는 법 - 맨 윗줄에 import {useState} from 'react'하고 원하는 곳에 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있다. - 나중에 저장한 자료를 쓰고 싶으면 let[a,b] = useState('남자 코트 추천'); import { useState..

✏️ 개발환경 설치 및 세팅 1. 구글에 Nodejs를 검색해서 LTS라고 써있는 버전을 설치 2. Visual Studoi Code 에디터 설치 ✏️ 리액트 프로젝트 생성 1. 작업용 폴더 만들기(찾기 쉽게 바탕화면에 만들기) 2. 맥북 기준! control 누른 상태에서 클릭, 터미널 열기 3. 아래 코드 입력하면 프로젝트 생성 완료! (프로젝트 이름은 개인이 원하는 이름으로 설정) npx create-react-app 프로젝트이름 4. Visual studio code 에디터 켜서 File - Open Folder 누른 다음 생성된 폴더명 선택 5. 에디터 상단 메뉴에서 Terminal - New Terminal 누르고 아래 코드 입력하면 내 사이트 브라우저로 미리보기 가능! npm start ✏️..

문장 내 구조 : 굵게 강조 : underline to Tags: ... 점점 작아짐. 제목 태그용 : 줄 바꿈 : 단락으로 줄 바꿈 css 문법으로 속성 바꿀 수 있음 ex: : 사진 이렇게 사이즈 조정도 가능, 위치 상관x : 의 부모 태그 (도 사용가능) : 숫자가 매겨지지 않는 list(Unordeded list) : 숫자가 매겨지는 list(Ordered list) : 목차, 목록 : 링크 걸기 : 링크 클릭시 새 탭으로 열림 : 링크에 마우스 커서 올리면 툴팁이 나타남 전체 구조 : 페이지 제목 설정 : 웹 브라우저가 열 때도 utf-8로 열기 → 관용적으로 HTML이 담겨있다는 뜻으로 이라고 씀 : 설명하는 태그 : 본문 묶는 태그