이때동안 컴포넌트를 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 = ['안녕', '디지몬', '네 꿈을 꾸면서', '잠이..
저번시간에 Component를 만들어 보았다. 근데 상위 Component에서, 하위 Component로 데이터를 보내고 싶었는데 보낼수가 없었다... 왜냐하면 함수가 다르기 때문이였다. 그래서 이번엔 props를 배워보았다. 저번시간에 내용은 이거시다. 일단 props를 이용해서 문자열을 하나 보내보자! 아래의 사진의 빨간색 네모안을 추가하였다 title이나 name이나 src나 저런 것들을 속성이라고 한다 React 도큐멘트에서도 저런식으로 쓰면 된다 카더라 저걸 보고 깨닫고 난 아래의 코드를 작성하였다 props의안에 title라는 속성이 담겨져 있다고 보면 된다 그리고 그걸 바로 변수에 담아서 jsx코드에 넣어 보았다 그러는순간 바로 간지나게 이렇게 되어버렸당 그렇다면 좀 더 응용을 해보자 데이터..
이번엔 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 이름을 줄 때는 ..
오늘부터 React.js를 공부해보겠다 내가 React.js 한 번도 안 한 쥿밥이니까 여러분들도 다 할 수 있다고 본다 일단 초기 셋팅부터 해보자 공부방법은 유튜브 꽁짜강좌를 보면서 한다 일단 Node.js를 설치하도록 하라 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 최신버전을 다운로드하고 인스톨해라 그다음은 에디터가 있으면 좋은데 자신 있으면 메모장으로 하고 자신 없으면 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code i..
