JH 개발 블로그

pull 하고 merge 하면 어떻게 바뀌어지는지 멘토님한테 물어보았다. 1. git pull 을 해줘서 로컬의 main 을 최신상태로 만들어줬다. 2. 로컬 main 의 브랜치인 jihyun 을 같이 업데이트 해주려면 git merge main 을 쳐야 한다. 3. 둘 다 최신상태로 바꿔주었다. function App(){ const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo === ""){ return; }..

function App() { let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']); let [따봉, 따봉변경] = useState(0); let [modal, modal변경] = useState(false); return ( 개발 Blog { 글제목.map(function(글){ return ( { 글 } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 16일 발행 ) }) } {modal변경(!modal)}}>열고닫기 { modal === true? : // 자식 컴포넌트 사용 null } ); } function Modal(){ return ( 제목 날짜 상세내용 ) } export default App; 이 코드는 Ap..

1. 조건문 쓰는 방법 JSX 에서 { } 안에 자바스크립트 코드를 쓸 수 있다. 하지만 if 문은 불가하다. if 문 대신 삼항연산자를 JSX 안의 { } 내에서 쓰기 가능하다. return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 { 1👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 // modal 창 1개 { 1👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 { modal===true ? // : null } ); } 마찬가지로 모달창이..

각 컴포넌트의 state 는 완전히 독립적이다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이다. 실제로 각각의 Hook 호출은 완전히 독립된 state 를 가진다. 그래서 심지어 한 컴포넌트 안에서는 같은 custom Hook 을 두 번 쓸 수도 있다. Hook 은 state 그 자체가 아니라 "상태 관련 로직을 재사용하는 방법"이다. Custom Hook 은 기능이라기보다는 컨벤션에 가깝다. 이름이 "use" 로 시작하고, 안에서 다른 Hook 을 호출한다면 그 함수를 custom Hook 이라고 부를 수 있다. useSomething 이라는 네이밍 컨벤션은 linter 플러그인이 Hook 을 인식하고 버그를 찾을 수 있게 한다. 폼 핸들링, 애니메이션, 선언적 구독, ..

SPA(Single Page Application) 페이지가 한개인 애플리케이션이다. 이전에 HTML, CSS, Javascript 를 배웠을 때는 페이지 수만큼 html 파일이 존재하였다. 반면, 리액트 프로젝트에서 .html 파일의 개수는 ? 1개이다. 한 개의 웹 페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? Routing 이다. 이것은 SPA 방식이다. Routing 라우팅이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어 있지 않는다. React-router (= 리액트 라우터)는 여러 페이지들을 연결시켜주는 역할을 한다. 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리이다. 라우터는 페이지들을 연결해주..

Framework, library 에 대해 알아보자. 공통점: 다른 사람이 만들어 둔 코드 차이점: Framework - 다른 사람이 만든 틀(Frame) 안으로 내가 들어가서 작업하는 것 library - 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것 Framework : Angular, Vue Library : React 프레임워크는 신라면, 주방을 제공한다고 보면 되고, 라이브러리는 냄비를 제공한다고 보면 된다. 예를 들어... ▼ 프레임워크가 모두 제공되서 편리하지만 문제는 신라면만 제공되면 신라면만 먹어야 한다. 또한 해당 조리도구를 익혀야 한다. 하지만 라이브러리는 라면을 끓이기 위한 하나의 도구인 냄비 (남들이 만들어 놓은 도구) 를 제공 받는다. 안성탕면이나 불닭볶음면 등 ..

return ( ) return 소괄호 안에 이렇게 div 태그가 여러개 들어가는 것은 불가능하다. 대신 하나의 큰 div 태그가 여러 div 태그들을 감싸는 것은 가능하다. return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 // 주목하기 제목 날짜 상세내용 ); div 태그 지옥... 리액트는 HTML 을 한 단어로 줄여서 쓸 수 있는 방법을 제공한다. --> 이것이 리액트의 Component 문법이다. ↓ return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행..

리액트의 데이터 저장공간 state 만드는 법 1. { useState } 상단에 첨부한다. 2. useState{데이터} import React, { useState } from 'react'; // 1. state 사용하려면 상단에 이렇게 첨부 import logo from './logo.svg'; import './App.css'; function App() { useState('남자 코트 추천'); // 2. [a, b] let posts = '강남 고기 맛집'; return ( 개발 Blog { posts } 11월 14일 발행 ); } useState 함수를 실행해주고 나면 두개의 원소를 가지고 있는 array 를 리턴해준다. ==> [a, b] a 는 useState() 안에 작성해준 sta..

index.js ReactDOM.render( , document.getElementById('root') ); index.js 라는 파일에서는 app.js 에 있는 코드를 public 폴더 밑에 있는 index.html 에 박아넣으라는 문구가 보인다. JSX 에 대하여 function App() { return ( ㄴㅇㄹㄴㅇㄹㄴㅇㄹ ); } app.js 파일 안에서 return 안의 소괄호에는 html 코드를 작성할수 있다. 그런데 여기에는 정확히는 JSX 문법을 작성해야 한다. (HTML 처럼 생긴 JSX 코드) 그러나 html 의 div class 를 쓰면 안된다. 자바스크립트의 문법을 가지는 JSX 이기 때문에 class 는 자바스크립트의 class 를 나타내므로 div className 을 써주..