Travel to Frontend (372) 썸네일형 리스트형 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지21회차 미션 패스트캠프 프론트앤드 인강 21일차 리액트에서 useRef로 컴포넌트안에 변수만들기와 배열에 항목추가하기를 배웠다. 컴포넌트안에 변수만들기 변수는 예를들어 컴포넌트 내부에 let키워드를 사용해 변수선언한다가정할때리랜더링될때 변수값은 초기화된다. 만약 계속유지하고싶으면 useState를 사용해야하는데 useState같은경우는 상태를 바꾸게되면 컴포넌트가 리랜더랑된다컴포넌트가 리랜더링될때마다 어떠한값을 관리할때도 useRef를 사용한다. useRef로 관리하는 값은 바뀌어도 컴포넌트가 리랜더링되지않는다. 지난번에 사용했던 코드에 고유 id값을 useRef로 관리해보자. App.js import React, {useRef} from 'react'; import './App.css'; // import User.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지20회차 미션 패스트캠프 프론트앤드 인강 20일차 리액트에서 useRef로 특정 dom을 선택하는 방법과 배열랜더링을 배워보았다. dom을 선택하는방법 1.useRef를 리액트에 import한다. import React, {useRef} from 'react'; 2.useRef() 함수를 호출한다. const 유즈리프 = useRef(); 3. 원하는 함수에 current.dom조정하는 코드를 넣어준다. const 함수명 = () =>{ 유즈리프.current.focus(); } 4.사용할 태그에 useRef를 넣어준다. 활용예문(지난시간에 했던 inputSample.js를 다시불러서 해보았다.) import React, {useState, useRef} from 'react' export default functio.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션 패스트캠퍼스 프론트엔드 인강 19일차 리액트에서 input상태를 어떻게 관리하는지 input이 하나일때와 여러개일때를 알아보았다. 기본셋팅 App.js import React from 'react'; import './App.css'; import InputSample from './inputSample'; function App() { return ( ); } export default App; inputSample.js import React from 'react' export default function InputSample(){ return( 초기화 값 어쩌고저쩌고 ); } 랜더링을 하면 결과값 input상태를 관리하는방법 input안에 값을 넣으면 어쩌고저쩌고라는 말이 값에 따라 업데이트가되고.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션 패스트캠퍼스 프론트엔드 인강 18일차 리액트 조건부랜더링을 배우고 usestate를 통한 동적상태관리를 배웠다. 조건부 랜더링이란? 특정조건이 참인지 거짓인지에따라 다른결과가 나온다. App.js import React from "react"; import "./styles.css"; import Hello from "./Hello"; export default function App() { return ; } 참고로 isSpecial={true}에서 boolean은 true인경우 생략이 가능하다. import React from "react"; import "./styles.css"; import Hello from "./Hello"; export default function App() { retur.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 17회차 미션 패스트캠퍼스 프론트엔드 인강 16일차 리액트 JSX규칙을 배우고 props를 통해 컴포넌트에 값을 전달하는방법을 배웠다. JSX jsx문법은 리액트에서 컴포넌트의 생김새를 정의하는 문법 html같지만 자바스크립트이다. 바벨도구를이용해 xml이 자바스크립트로 변환된다. https://babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 바벨홈페이지에서 try it out 메뉴를 누른후 jsx를 다음과 같이 타이핑해보자 ( hello,React ) React안에는 createElement라는 함수가 있는데 이것을 통해 컴포넌트를 만든다. 하지만 매번 .. [flexbox] 여러줄을 표현하는 wrap, column flex를 쓰고있지만 매번 쓰던것만 써서 안쓰는 아이들을 배워보았다. 먼저 여러줄을 표현할때 매번 flex-direction 만 썻지만 flex-wrap으로도 할수있다하여 공부해보았다. flex-wrap 1 1 1 둘다 여러줄을 표현해주는데 개념은 완전히 다르다할수있다. 우선 flex-wrap:wrap을 사용할때는 #wrap div에 height값이 필요하지않다. height값을 임의로 설정할경우 아래와같은 결과가나온다. flex-direction과의 차이 그다음 flex-direction:column는 주축을 세로로 완전히 바꾸는개념이라 #wrap div에 height값이 필요하다 여기서는 숫자 1이 공간을 형성해줘서 보이기는하지만 숫자를지울경우 이미지가사라진다 꽉채우려면 height:100%로 바꿔야.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 16회차 미션 패스트캠퍼스 프론트엔드 인강 16일차 리액트를 설치하는방법을 알아보고 리액트 컴포넌트를 만들어보았다. nodejs는 브라우저 환경이 아닌곳에서도 자바스크립트를 실행할수있게 도와주는 자바스크립트 런타임이다. 리엑트도구들 웹팩 바벨등도 자바스크립트 노드js기반으로 만들어져있다. yarn같은경우는 자바스크립트 패키지를 매니징하는 도구인데 노드js를 설치하면 npm이 자동 설치되는데 yarn을 사용하면 더 빠른속도로 다운받을수있게해준다. vs code는 에디터이다. 그밖에 git도 설치를하여 준비를 하자. 설치는 구글에 공식홈페이지를 이용하여 본인운영체제에 맞춰 다운받는다. 무료로 다운받을수있다. npx create - react app 리엑트프로젝트명 cmd창에서 리엑트를 설치할 파일로 이동한다(d:엔터시 d.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 15회차 미션 패스트캠퍼스 프론트엔드 인강 15일차 hoisting을 배우고 리액트의 필요성에대해 공부하였다. hoisting hoisting이란 자바스크립트에서 아직 선언되지않은 변수또는 함수를 끌어올릴수있는 자바스크립트 작동방식 function myFunction(){ console.log('hello') } myFunction() 위의 myFunction함수를 맨위로 끌어올리면 어떨게될까? 선언되기전에 호출했는데 잘 작동하는데 자바스크립트 엔진이 이코드를 해석하는과정에서 선언을 먼저했다고 생각하기때문이다. 변수또한 호이스팅이 가능하다 에러가떠야하는데 맨위에 var number;가 있다고 생각하기때문에 undefined가 뜬다. 단 let과 const는 호이스팅 불가 호이스팅은 코드가 많아질경우 이해하기힘들게하고 .. 이전 1 ··· 39 40 41 42 43 44 45 ··· 47 다음 목록 더보기
