굥뷰를 햡시댜

React 컴포넌트에서는 컴포넌트 내부에서 선언한 변수의 값이 바뀌더라도, 화면에 그려진 값이 바뀌지 않는다. 이럴 때 useState를 사용해서 값이 바뀌었을 때 바로바로 반영해준다. import {useState} from 'react'; function App() { const [number, setNumber] = useState(1); const double = () => { const doubleNumber = number * 2; setNumber(doubleNumber); console.log(doubleNumber); }; return ( {number} Submit ) } export default App;

React Component에서 버튼 클릭시 이벤트를 주는 방법을 코드로 작성해보도록 하겠습니다. function App() { const number = 1; const double = (number) => { return number * 2; }; return ( {double(number)} { console.log('hello') }}>Submit ) } export default App; onClick 이벤트 작성시 C를 반드시 대문자로 입력해주셔야 합니다. (React 규칙이고, 나중에 다른 이벤트들도 마찬가지입니다.) Submit 버튼 클릭시 콘솔에 hello라는 로그를 남기는 코드입니다. 개발자 도구를 열고 보시면 아래와 같이 확인할 수 있습니다. ㅎㅎ 이 코드는 아래와 같이 바꿔서 작성할..

1. Fragment란? -> 컴포넌트를 감싸는 녀석(?) 이라고 보면 됩니다. ㅎㅎ 이렇게 말하면 너무 불친절 하니까 아래 부가적으로 Fragment를 설명해보겠습니다. 2. Fragment를 사용하는 이유? -> 기본적으로 한 컴포넌트에서 jsx 템플릿을 반환한다고 이전 게시물들에서 설명했습니다. 이 때, 여러 html 태그를 return 하고 싶으면 어떻게 해야 할까요? 이럴 때 사용하는 것이 Fragment 입니다. Fragment를 사용하는 방법은 3가지가 있지만 가장 간단한 방식을 아래 예제 코드로 보여드리겠습니다. /src/App.js 파일 코드를 한 번 보시죠! function App() { const number = 1; const double = (number) => { return n..

이전 게시물에서 만든 프로젝트에서 /src/App.js 코드를 아래와 같이 수정했다. function App() { const number = 1;// 변수 선언 및 초기화 const double = (number) => { return number * 2; };// 화살표 함수 생성 (number)는 파라미터 return ( {double(number)} )//2번째 줄에 선언한 number를 파라미터로 넘김 } export default App; 이런 식으로 화살표 함수를 작성하고, 실행할 수 있다. (일반 함수로 만들어줘도 되지만, 요즘 트렌드가 화살표 함수를 사용하는 것이기도 하고 훨씬 간결하다. ㅎㅎ)

시작 전, 필요없는 코드들을 지워주고 시작한다. (/src/index.js) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 불필요한 주석, ReactStrict Mode, reportWebVitals.js 에 대한 코드들을 지웠습니다. ----------------------------------------------------------------------------------------------..

이전 글에서 생성한 react 프로젝트를 열어본다. 1. 폴더 열기 2. react 프로젝트 만든 폴더로 들어가서 열기 그럼 위와 같이 PROJECT01 폴더 내부에 다른 폴더 및 파일들이 보인다. 이번 게시물은 이 폴더, 파일들에 대한 설명 글이다 ㅎㅎ 1. package.json -> npm을 사용해서 필요한 패키지를 설치한 리스트를 볼 수 있다. -> 앞에서 npx create-react-app 으로 React 프로젝트를 만들게 되면 기본적으로 아래와 같이 세팅되어있다. ㅎㅎ -> 또, "scripts"를 보면 "start", "build", "test", "eject"가 있는데 이전 게시글에서 npm start로 react app을 실행시켰던 것을 생각해보자. 해당 내용에 대한 것을 여기 기술해놓..

1. node.js 설치 ( node.js 설치 사이트에서 LTS 버전으로 설치!) -> node -v 로 설치 및 설치 버전 확인 -> npm은 node.js를 설치하면 자동으로 설치됩니다. (npm -v로 설치 및 버전 확인) 2. react 작업할 프로젝트 경로 설정 -> 저는 C드라이브 경로에 따로 추가했습니다. (C:\study\ReactLecture) 3. react 설치 -> npx create-react-app 프로젝트명 (npx는 npm을 설치하면 사용하실 수 있습니다.) -> 예시) npx create-react-app project01 (project01은 프로젝트명입니다.) PS C:\study\ReactLecture> npx create-react-app project01 Need..

프레임워크와 라이브러리... 무엇인지는 알지만 명확한 단어로 설명은 하기 어려운... 그래서 이번 기회에 프레임워크와 라이브러리의 차이에 대해 알아보겠습니다. 1. 프레임워크 - 원초적인 뜻으로는 '뼈대'나 '기반 구조'를 뜻합니다. - 쉽게 말해 프로그래머는 이런 기반 구조에 추가적으로 코드를 입력하여 원하는 소프트웨어를 만들어 냅니다. - 프레임워크는 특정 개념들의 추상화를 제공하는 다양한 클래스와 컴포넌트로 구성되어 있습니다. - 예를 들어 Spring, Django, Ruby on Rails와 같은 것들이 프레임워크 입니다. 2. 라이브러리 - 라이브러리는 단순 활용가능한 도구들(클래스, 메소드 등등..)의 집합입니다. * 정리 프레임워크와 라이브러리의 차이점을 한 줄로 명확하게 말하자면 개발할 ..