Life Cycle ? 컴포넌트의 요람에서 무덤까지 컴포넌트가 계속 변화하기 때문에 중요 핵심 4가지 Contructor State 구조 설정 컴포넌트가 Mount 하기 전에할 설정 setState X CompopnentDidMount 필요한 데이터 요청 각종 비동기 요청 (Subsription) ComponentDidUpdate 업데이트 이후 수정할때 If(){ setState() } //무한 반복 방지를 위해 조건문을 적용 ComponentWillUnmount 데이터 요청, 비동기 함수, 타이머 종료 -> data leak 방지 *setState X * console.log로 살펴보기 앞서 수정했던 App.js의 구조를 보면 다음과 같이 이루어져 있다. 자식 컴포넌트 :WorldClock 부모 컴포넌..

event? 웹 상에서의 모든 행위 React에서 이벤트를 나타내는 prop에는 on[Event] 이벤트를 처리하는 함수에는 handle[Event]\ 이벤트를 만드는 3단계 state 만들기 Handling 함수 만들기 이벤트가 발생하는 HTML 태그에서 on[Event]를 통해 handling 함수를 부른다. event를 활용해 stop 버튼 만들기 // 1단계 class WorldClock extends React.Component{ constructor(props){ super(props) this.state = { hour: this.props.time, minute : 0, stop: false, } //this.setState this.timer = setInterval(()=>{ this...

1. state 란 ? 각 컴포넌트들이 가질 수 있는 상태들의 집합 props를 통해서 자식 컴포넌트로 값을 넘길 수 있다 컴포넌트들마다 state는 있을 수도 있고, 없을 수도 있음, 남발하면 안 좋다는 뜻 props 만으로도 표현할 수 있는가? Render로 표시되지 않는 값인가? => 2개에 해당되지 않는다면 state로 원래 Fucntion는 stateless로 구분였지만 hook이 등장하면서 Function도 state를 쓸 수 있게 되었음 하지만 class를 이해해야 hook도 이해하기 쉬우므로 class 먼저 함 state를 사용하여 만들었던 WorldClock함수를 class로 만들어보자 단, 다음과 같은 요구 사항이 있음 요구사항 1. 시간과 분이 변화하는 것을 보고 싶다. 요구사항 2...

이전 글에서 만든 WorldClock 컴포넌트는 하나 추가할 때마다 일일히 태그를 작성해야되는 귀찮음이 있었다. 이를 해결하기 위해서 리스트로 간편하게 바꿀 수 있다. function App() { const cityTimeData = [ ['서울',10], ['베이징',9], ['시드니',12], ['LA',17], ['부산',10] ] const WorldClockList = cityTimeData.map((citytime,index)=> ) return ( Hello World {WorldClockList} } ); }결과가 동일하게 나오는 것을 볼 수 있다. 반복성 있는 컴포넌트에서 엘리먼트는 반드시 고유한 key를 가져야한다..

Props? 각 컴포넌트에 데이터를 key와 value 값으로 전달해주는 기능 Read Only 컴포넌트 만들고 props로 값 받아서 출력하기 function WorldClock(props){ return( 🌎도시 : {props.city} ⌚시간 : {props.time} 시 ) } function App() { return ( //이전 글과 내용 같음 )

JSX ? javascript에서 쓰는 HTML 비슷한 것 태그 이름은 기존 HTML과 거의 유사하다 (다른 것도 있음) Attributes나 css는 camel방식이다. (className,textAlign) JS코드를 활용하고 싶다면 {}를 이용한다. JSX로 inline style 넣기 //App.js Hello World 변수로 선언해서 넣는 것도 가능하다 //App.js const myStyle = { color:'red', fontWeight:'bold', //font-weight 가 아니라 fontWeight } function App() { return ( Hello World className 사용하기 기존의 HTML과는 다르게 class 대신 classNam..

리액트의 장점 상호작용이 많은 UI 효율적인 컴포넌트 갱신 및 렌더링 스스로 상태 관리하는 컴포넌트 DOM과 별개로 상태 관리 앱 안 데이터 손쉽게 전달 npm ? node package manager. 자바스크립트의 다양한 라이브러리들을 관리해주는 도구. 파이썬의 pip랑 비슷함 개별 프로젝트 폴더에 따로 설치 가능 전체적으로 사용하도록 설치도 가능 (-g, global) 사용은 주로 npm으로 시작 npx : 따로 모듈 설치 없이 사용할 수 있게 해주는 툴 Node.js 설치하기 운영체제에 맞는 거 설치 터미널에 node--version을 쳤을때 버전이 나오면 정상적으로 설치된 것임 프로젝트 생성하기 npx create-react-app [앱 이름] 위에서 하라는대로 해보면 다음과 같은 화면을 확인할..

Promise 언젠가 해결할 것이라는 약속 /* new Promise ((resolve, reject) => {}) Resolve -> 해결, 성공 - > then Reject - 거절, 실패 -> catch */ function sayHello2(name){ return new Promise((resolve,reject)=>{//이건 안 바꾸는게 좋음 setTimeout(()=>{ console.log(name+"님 안녕하세요") resolve("서울") },3000) }) } sayHello2("Frank") .then((seoul)=>console.log(seoul+" 로 안녕히가세요")) //resolve의 output을 받아서 input으로 쓸 수 있다. /* 실행결과 Frank님 안녕하세요 서..