이번 시간에는 useEffect를 사용해 보겠다 useEffect란? 최초 실행을 할때와 내가 원하는 시점에 실행되게끔 하는 함수이다 이렇게 말하면 모를 것 같으니 실습 바로 들어간다 1. Improt 하고. 함수 작성법 import './App.css'; import {useEffect, useState} from 'react' function App() { useEffect(() => { }); return ( ); } export default App; 일단 react에 있는 useEffect를 Import 해주고 그 밑에 다가 useEffect함수를 작성한다 2. 실습 재료 작성 useState에다가 숫자 아무거나 넣어서 하나 작성하고 useEffect에는 set함수를 통해 값을 넣어준다 그다음은..
이번 시간에는 useRef를 사용할 것이다 useRef는 참조한 DOM객체를 뜻한다 일단 뭔 말인지 모를 것이니, 바로 실습 들어간다 사용방법은 useRef를 Import 한 뒤에 아래를 추가한다. 밑에 화면을 참조하도록 하자 const myRef = useRef(); 그리고 테스트를 해보기 위해서 TextBox 2개랑 Button 하나만 추가해 보자 그다음은 myRef를 어디 어떻게 쓰는지 보여주도록 하겠다 당신이 원하는 DOM에다가 속성 ref를 추가하고 값을 저렇게 넣어주면 된다 그다음 함수 ( clickEvent )를 만들어 볼까? const clickEvent = () => { console.log(myRef.current); } 함수를 추가하고 console.log로 한번 내용을 보도록 하자 ..
이때동안 컴포넌트를 App.js 이라는 같은 파일에 다 넣어 놨었다. 하지만 글자수가 많아지면서 눈도 아파 질터이니 따로 분리하도록 한다 그편이 먼 미래에 유지보수도 좋아지기 때문이다 지금부터 이 컴포넌트를 옮겨 보도록 한다 일단 component라는 폴더를 생성하고 그안에다가 따로 격리 시키도록 하자 옮기고 싶은 컴포넌트의 이름과, 동일하게 JavaScript 파일을 생성한다 그리고 간단하게 복붙하였다 근데 const 다음의 함수명이 뭔가 심상치 않다. 아파보이기때문에 문제가 있을 것이다 그리고 App.js에 가봐도, TestComponent가 피가 흐르고 있는 것을 볼 수 있다 그이유는 App.js에는 더이상 TestComponent라는 것이 없기때문이다. 그러므로 import를 하도록 하자 impo..
React를 공부하면서, 서버로부터 List를 받아오고 어떻게 HTML에다가 뿌릴 수 있을까?라고 궁금해했다 그래서 이번엔 찾아보면서 드디어 하는 방법을 알아냈다. 일단 최상위에다가 실습할 컴포넌트를 추가한다 그다음은 컴포넌트를 만드는 함수를 생성해 주도록 하자 const ListComponent = () => { } 그다음 해야 할 일 1. List 데이터를 준비한다 (서버에서 받아온 값이라고 생각하자) 2. element를 만들 리스트 변수 하나 선언 2. for문으로 list값 을 2번에서 만든 변수에 add 하기! 3. 마지막으로 return 하기! 위의 순서대로 작성한다 const ListComponent = () => { let list = ['안녕', '디지몬', '네 꿈을 꾸면서', '잠이..
React는 Component기반이기 때문에 Component단위로 만들지 않으면 의미가 없다고 한다. 그러기 때문에 이번엔 Component를 배워본다 컴포넌트를 만들기 위해서, 기존에 있는 코드 중에 를 추가 하였다. 근데 피가 흘리게 된다. 왜냐하면 함수를 작성하지 않았기 때문이다 * React에서 컴포넌트를 만들 땐 무조건 반드시 맨 앞에 문자는 대문자를 하도록 하자 ex ) Createcomponent, TestComponent, Rrrrrr etc.. const TestComponent = () => { return ( 안녕 난 Component야 반가워 ) } 이런 식으로 추가하면, 아까 피가 흐르던걸 지혈할 수가 있다 그러면 이렇게 컴포넌트를 분리시켰고, 화면에 나타나게 해 보았다! 다음엔..
이번엔 useState를 사용해 보겠다 useState라는 것은 react에 있어서 스무스하게 하도록 하는 저장 기능이라고 한다 그래서 앱처럼 움직이게 할려면 변수에 저장하는 게 아니라, useState에 넣어서 사용해야 하고, 자주 변경될만한 것을 대상으로 한다 일단 useState 라는 것을 import 시키고 나서, [] = userState( 값 ); 를 적는다 useState()를 쓰다면, 반환되는 값이 [값 1, 값 2]가 반환된다고 한다 값1 이 userState( 값 ) 이 되고, 값 2가 변경될 값이라고 한다 그다음은 바인딩을 변수와 똑같이 { } 를 사용하면 된다! 이렇게 하면 useState를 사용하는 방법이 되겠다 그리고 useState() 의 값은 어떤 값이 들어가도 된다 ex )..
데이터 바인딩이란 나도 쥿밥코더라서 잘 모르겠지만 대충, 서버에서 데이터를 받아왔다면 그 데이터를 HTML에 보여주도록 한다는 느낌인 거 같다 암튼 그걸 리엑트에서 해볼 것이다! 일단 App.js에서 변수 하나 만들어서 한번 꽂아 보자 기본 데이터 바인딩 데이터를 변수를 하나 만들어 줘 봤다 let data = 'Do you want to build a Snowman?'; 신세계를 경험하였다.. { data } 이거만 살짝 끼얹었을 뿐인데 바로 간지 줄줄 흐르더라 기본 JavaScript는, 를 document.querySelector()로 찾아서 . innerHTML = data 이런 식이여야 하는데 { data } 하나만으로 보여준다면, 앞으로 React행님이라 칭하도록 한다 함수 바인딩 그리고 또 ..
저번 시간에는 React 프로젝트를 생성을 했고, 실행을 하여 간지 나는 React 로고가 뜨는 것 까지 성공했다. 이번 시간은 메인 페이지를 한번 만들어 볼 생각인데 그러려면 그 간지 나는 React 로고와 빠이빠잉 할 시간이 된 것이다 ㅠㅠ App.js에서 태그를 다 날려주고 아무거나 넣어보자 그리고 브라우저를 보면 간지 없는 화면으로 바뀌게 된다 Nav 만들기 Blog 여기서 중요! 보통 HTML에서 class이름을 설정할 때, class=""이지만, 여기서는 className을 사용한다 그 이유는 App.js는 결국 JavaScript 문법만 사용할 수 있는 파일이다 그러므로 저거슨 HTML라고 구라 치는 JavaScript라고 보면 된다. (JSX)라고 카더라 그러니 class 이름을 줄 때는 ..
