TechScribe Notes

1.Props :자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 props를 이용하여 사용가능 -부모-자식간의 관계인 경우 사용가능!! -함수 블록 안에서 선언한 변수는 밖에 나오면 사용 불가함 여기서도 마찬가지 1)사용하는 법 -자식 컴포넌트 사용하는 곳에 { modal == true ? /Modal> : null } -자식 컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용 let Modal = (props) => { return ( {props.글제목[0]} 날짜 상세내용 글수정 ) } -props는 여러개를 만들어서 무한히 전송이 가능하고 state뿐 아니라 변수명, 텍스트,함수도 가능함. 📚숙제 1: 배경색 넣어보기 -function Ap..

1.컴포넌트 : 자주 쓰이는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법. function Modal(){ return( 제목 날짜 상세내용 ) } 1)컴포넌트 만드는 법 -함수 리터럴로 만든 후 return()안에 내가 넣고 싶은 html코드를 담으면 끝! *화살표 함수로도 가능 let Modal = () => { return ( 제목 날짜 상세내용 ) } 그리고 이걸 재사용하기 위해서는 App()안에 요런 태그를 함수이름을 사용하여 작성해줌. 컴포넌트의 장점: 재사용이 가능하고 유지보수가 쉽다. 2) 만들 때 주의할 점 -작명할 때는 대문자로 시작 -return안에는 가장 위의 부모요소가 평행하게 여러개 들어갈 수 없음 -function App(){ } 이 내부 안에 만드는 것이 아..

1.State 란 :리액트 컴포넌트의 상태, 변경가능한 데이터 -랜더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함 2.state만드는 법 1)맨 위에 아래 코드 한 줄 작성 import { useState } from 'react'; 2)useState('보관할 자료') 로 작성하여 자료를 잠시 저장하거나 만약에 나중에 저장한 자료를 사용하고 싶으면 let [a,b] = useState('사용할 자료') 로 적을 수 있음. a,b는 자유롭게 작명 가능 let [글제목,글제목변경] = useState(['남자 코트 추천','독산동 횟집 추천','가산동 붕어빵 맛집']); a는 현재 자료를 담고있는 변수명, b는 나중에 state에 담은 자료를 변경하고 싶을 때 사용함(변경을 도와주는 함수) ..

기본적으로 프론트엔드나 웹퍼블리셔를 하려면 꼭 필요한 HTML,CSS,JS... 이렇게 익숙한거 두고 왜 리액트를 쓰고 왜 많이 쓰나 생각해봐야한다. 리액트란? 웹과 네이티브 사용자 인터페이스를 위한 JS 라이브러리, 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 랜더링 하는데 관여하므로. *다양한 자바스크립트 UI프레임워크 -앵귤러: 구글에서 만든 오픈소스 프로젝트. 5~6년전에 많이 사용되었지만 2022년 공식적인 지원 종료. -뷰 js : 개인이 만든 오픈소스 프로젝트. 문법이 쉬워서 큰 기업에서 많이 사용함. *라이브러리와 프레임워크 라이브러리: 흐름에 대한 제어를 하지 않고, 개발자가 필요한 부분만 필요할 때 가져다 사용함. (어떠한 특정한 기능을 모듈화 해둠) 프레임워크: 흐름의 제어 ..

◾State -리액트는 모든 것을 State라고 불리는 상태 값으로 변화를 주고 표현함. -state값이 달라지면 해당 state를 가진 컴포넌트는 다시 그려진다. (불필요하게 다시 그려지는 컴포넌트를 최소화해야함) -상태 값은 부모에서 자식으로 흐름 (위에서 아래로) -형제끼리는 상태 값을 주고 받을 수 없다: 형제를 포함하고 있는 상위부모로 상태 값을 올리고 다시 내려주는 방법을 사용한다. 부모로부터 내려받는 구조가 너무 복잡해지면 글로벌하게 상태를 관리할 수 있는 수단을 선택한다(ContextAPI, Redux, Mobx 등...) ◾Props -외부로 받는 state를 prop라고 부름. 둘다 상태값을 의미하지만 외부로부터 받는지 자신이 갖고있는지에 따라 명칭이 달라진다. ◾React Hook -..

✔import/export 모듈 시스템 이해하기 구조 분해 할당 - JavaScript | MDN (mozilla.org) 💡 컴포넌트란 ? -컴포넌트를 만드는 2 가지 방법 비교 -클래스 컴포넌트와 함수형 컴포넌트의 역할과 목적차이 클래스형 컴포넌트는 상태 값과 라이프 사이클 (컴포넌트의 변화를 감지하는 함수) 을 가질 수 있습니다. 함수형 컴포넌트는 상태 값을 가질 수 없고, 컴포넌트의 변화를 캐치 할 수 없었습니다. 그러나, 리액트 훅 이라는 것이 나오면서 함수형 컴포넌트도 클래스 컴포넌트가 할 수 있는 것들을 할 수 있어졌습니다. 요즘은 더 간단하고 흐름이 눈에 잘 보이는 함수형 컴포넌트 사용을 선호합니다. (but. 꼭 함수형 컴포넌트를 사용해야 하는 것은 아닙니다)