본문 바로가기

분류 전체보기

 (454)
6. state(컴포넌트 속성값) useState() 이용하여 버튼 눌렀을 때 이름 바꾸는 코드 동일한 컴포넌트라도 state는 각각 관리된다. 1. import {useState} from "react"; // const Hello=()=>{ // Hello; // }; // export default Hello; import World from "./World"; import styles from "./Hello.module.css"; import {useState} from "react"; export default function Hello(){ // let name='Mike'; const [name,setName]=useState('Mike'); function changeName(){ const newName=name==='..
5. 이벤트 처리(Handling Events) ex1)버튼 두 개를 만들어서 클릭이벤트 적용하기 방법1(미리 함수를 만들어 놓고 전달해주기) 방법2. onClick={()=>익명함수 정의} ex2) input 창에 글을 쓸 때 마다 console에 로그 나오도록 이렇게도 작성할 수 있다
4. CSS 넣기(3가지) 1. inline 스타일로 작성하기 (CSS 파일 따로 만들지 않고) style={{중괄호 한 후, 중괄호 안에 객체로 작성하기}} 속성명:"값" 형식으로 key:value로 작성하고 css에서 -을 쓰던것은 key값 쓸 때 camelcase로 작성 ex)backgroundColor:"red", 객체로 설정하기 때문에 ;(세미콜론)이 아닌 ,(쉼표)를 이용하여 작성 일반적인 경우에는 인라인으로 작성하지 않는다. 2. index.css, App.css 파일 활용 css를 만든 후 import 하여 적용시키는데 각 컴포넌트에 종속되는것이 아니라 head부분에 들어가 cascading 되므로 overriding 될 수 있다. (다른페이지에 원하지 않게 영향을 끼칠 수 있다) 3. import 객체명 from ..
3. 컴포넌트 실습 (직접 컴포넌트 만들기) 1. component 만들기(두가지 방법) - src/component 디렉토리 생성 - js파일하나 만들기(대문자로 시작) ex) Hello.js 방법1. arrow 함수로 (ex)Hello에 arrow function 정의 한 후) export default Hello 방법2 (export default function Hello(){} 로 한 줄로 작성 2. 만든 컴포넌트 사용하기 (App.js에서 import Hello from 경로) .js는 생략 가능 import한 컴포넌트를 태그 사용하듯이 원하는 곳에 써준다. 3. JSX는 하나의 태그만 return 할 수 있어서 하나이상의 태그를 사용할 땐 처음에 큰 태그로 ex) div로 묶어서 return (여러태그사용하여 작성) 사용. 컴포넌트 사..
2. 컴포넌트 기초 컴포넌트를 사용함으로써 페이지 단위로 HTML을 작성하는 것이 아니라 각 부분을 컴포넌트로 만들어서 조립하기 위해서 (비슷한 부분은 코드를 재사용할 수 있고 유지보수가 용이한 장점이 있다) 처음 시작할 때 App.js에 App 컴포넌트가 함수로 만들어져있고 export default App; 으로 되어 있다 (함수가 return하는 것은 JSX(Javascript XML)) 안의 JSX 지우고 새로 작성해서 만들기 import './App.css'; function App() { const name="Tom"; const user={ name:"Jane", age:20, }; const naver={ name:"네이버", url:"https://www.naver.com", }; return ( // c..
1. react 시작하기(설치~구성) 1. node.js 설치 (npm 사용하기 위해) 2. npx create-app 프로젝트명(아래와 같이 생성됨) ex) npx create-app voca 3. npm start (실행 결과 브라우저가 자동으로 열림) 4. src 디렉토리 안의 소스코드를 수정하면된다.(대부분의 작업) index.js app.js (HMR : Hot Module Replacement) public 디렉토리 안에는 index.html 으로 react코드가 실행되서 만들어진 DOM이 구현된다. 5.
10. async, await async와 await을 이용하면 promise를 조금더 간결하고 동기적으로 실행하는 것처럼 보이도록 해준다. syntactic sugar : 기존에 존재하는 것을 감싸서 우리가 좀 더 간편하게 쓸 수 있는 api를 제공하는 것을 말한다 ex)클래스도 해당 1. async : function 앞에 사용하여 다 처리될 때까지 비동기적으로 처리하도록 해준다. 2. await // async & await console.log('0. Promise 복습!'); // 사용자의 데이터를 네트워크 통신을 통해 백앤드에서 받아오는데 10초정도 걸리는 코드가 있다고 가정하고 // 10초 후에 우리가 받아온 값을 return 하는 함수 // 이 함수를 호출하고 출력을 하게되면 비동기적인 처리를 하지 않으면 동기적으로 자..
9. Promise (state, producer, consumer) 두 가지 고려 1. state(상태) : process가 operation을 수행하고 있는 중인지, 기능 수행이 완료된 후 성공했는지 실패했는지 2. producer, consumer의 차이점 (원하는 데이터를 제공하는 사람과, 제공된 데이터를 필요로 하는 사람에 대한 이해) ->Promise를 이용하여 callback 지옥 극복할 수 있다 - state (pending, fulfilled, rejected) pending (operation 수행 중)-> fulfilled(완료된 상태) or rejected(문제 발생) console.log("Promise 시작!!"); // 1.Producer // 2.Consumer : then, catch, finally // then (성공했을 때, resolv..

티스토리툴바