프로그래밍/리액트 react

리액트 튜토리얼 ( 기초 입문 ) - 5

본 게시물은 유튜브 "개발자의 품격" 님의 강의를 토대로 작성 되었습니다 이번엔 사용자의 입력을 받는 Input 컴포넌트를 만들어 봅시다 똑같이 컴포넌트 폴더에 Input.js 를 만들어주고 다음과 같이 작성 해줍니다 입력시 이벤트 그룹의 onChange 함수가 호출 되고 그에 따라서 현재 컴포넌트에서 만들어둔 onChange 함수가 호출이 됩니다 그리고 그 안에 있는 setTextValue가 실행이 되고 마지막으로 useState가 실행 되며 프로세스가 마무리 됩니다 곧 바로 이 다음, 여러 입력을 받는 예제도 작성 해봅니다 Input2라는 이름으로 이 다음 코드를 작성 해봅시다 디스트럭쳐링으로 선언한 변수를 스프레드로 불러와서 id 값과 같은 키를 찾아서 값을 처리 해준다

리액트 튜토리얼 ( 기초 입문 ) - 4

본 게시물은 유튜브 "개발자의 품격" 님의 강의를 토대로 작성 되었습니다 이번에는 가장 많이 쓰는 예제인 Counter를 작성 해봅시다 컴포넌트 폴더에 Counter.js를 만들어 줍니다 리액트에서 동적인 값을 다룰 때, 스테이트를 사용하며 useState를 통해 사용합니다 새로 만든 Counter.js에 다음과 같이 작성 합니다 0으로 지정된 num과 그 값을 변경 해 줄 set 함수는 setNumber를 만들어 주었습니다 이제 적절한 함수를 만들어주고 호출 해주어 다음과 같이 작성 합니다 그리고 App.js에서 Home과 같이 호출 해줍니다 그러면 다음과 같은 결과물을 볼 수 있습니다 저는 index.css에서 App의 div의 a태그에 margin 값을 주어, 글자들끼리 떨어지게 했습니다 리액트 재..

리액트 튜토리얼 ( 기초 입문 ) - 3

본 게시물은 유튜브 "개발자의 품격" 님의 강의를 토대로 작성 되었습니다 이제 메뉴를 만들어 보자! 앞으로 필요한 개념으로 라우팅 이라는 것이 있다 라우팅이란, 브라우저 url이 바뀔 때마다 보여줄 컴포넌트를 맵핑 한 후, 그 컴포넌트를 라우팅하는 과정. 이다 라우팅을 하려면 모듈을 새로 설치해야한다 경로를 myapp으로 지정 해준 후 아래 명령어를 새로운 터미널에 입력하자 npm install react-router-dom@6 리액트의 라우터의 돔을 버전6 으로 가져와 설치한다 설치가 완료되면 package에서 확인 가능하다 그리고 index.js에 BrowserRouter 를 import 해주자 그리고 또 index.js에 다음과 같이 작성해주자 그 다음으로, app.js에 다음과 같이 작성 해주자 ..

리액트 튜토리얼 ( 기초 입문 ) - 2

본 게시물은 유튜브 "개발자의 품격" 님의 강의를 토대로 작성 되었습니다 이제 본격적으로 컴포넌트를 생성해보자 src 폴더에 원하는 이름으로 폴더를 하나 만들어주자 나는 메모 어플리케이션이 목적이기에 memo라는 이름을 지어주었다 그리고 그 안에 Home 이라는 js 파일을 만들어주자 리액트에는 크게 두 가지 컴포넌트가 존재한다 아무래도 심플해서인지 함수형 컴포넌트를 더 많이 사용하는 추세이기에 함수형 컴포넌트로 작성을 해보도록 하자 기존 html 태그와 완벽히 같지는 않기에, className 이라고 지정 해줘야 class가 되는 부분 주의하자 기존에 불러오던 App.js에 만들어 두었던 Home.js 를 import 한 후 header 부분을 지운 후 Home 을 넣어주었다 그러면

리액트 튜토리얼 ( 기초 입문 ) - 1

본 게시물은 유튜브 "개발자의 품격" 님의 강의를 토대로 작성 되었습니다 폴더 하나 만들어주고 터미널을 열어서 기본적인 react 세팅을 해주는 명령어를 입력합니다 npm init react-app myapp 입력하기 (myapp 부분은 원하는 이름 넣기) 앞으로 src 폴더에 코드를 작성해 나가며 프로젝트를 완성하자 이제 [ cd myapp ] 을 입력해서 프로젝트 경로를 이동 후 [ npm start ] 를 입력 해주면 localhost:3000에 접속할 수 있게 된다 ( 포트 3000 = 디폴트 ) index.js 파일로 가보자 이제 root.render 안에 jsx (js+xml)로 입력한 것들이 index.html 의 id="root" 에 출력이 되게 된다 그 출력된 것이 바로 위에 있는 [ i..