🍺 이번 시간에는 useState를 통해 컴포넌트에서 '바뀌는 값' 관리하는 방법에 대해서 배워보겠다. 지금까지 우리가 리액트 컴포넌트를 만들 때에는 동적인 부분이 하나도 없었다. 값이 바뀌는 일이 없었다. 이번 시간에는 컴포넌트에서 보여주어야 하는 내용이 사용자의 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할지에 대하여 알아보겠다. 🍺Hooks 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태(state)를 관리할 수 없었다. (그래서 클래스 컴포넌트를 사용했었다. state안에 값이 변화해야 하는 변수를 넣었던 것) 그러나 리액트 16.8부터 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태(state)를 관리할 수 있게 되었다. 우선 useState를 사용해볼 것인데, 이게 리액트..

🐣 이번 시간에는 조건부 렌더링에 대해서 알아보겠다. 🐣 조건부 렌더링이란? 조건부 렌더링: 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 말한다. 조건부 렌더링을 사용하는 가장 쉬운 방법은 삼항 연산자를 사용하는 것이다. (삼항연산자-> 조건식 ? 참 : 거짓) function App() { return ( ); } 위와 같이 App 컴포넌트에서 Hello 컴포넌트의 props로 isSpecial을 true로 추가한다. true도 자바스크립트 값이기 때문에 중괄호 안에 적어주었다. function Hello({name,color, isSpecial}){ return ( {isSpecial ? ⭐ : null} {name}님 안녕하세요. ) } 이렇게 isSpecial의 값이 있는지 물..

🍫 이번 시간에는 props를 통해 컴포넌트에게 값을 전달하는 법, 그리고 children에 대해 알아보겠다. 🍫 props란? properties의 줄임말 컴포넌트를 사용하게 될 때 특정 값을 전달해주고 싶을 때 사용하는 것 🍫props를 이용해서 컴포넌트에 값 전달하기 function App() { return ( ); } App 컴포넌트에서 Hello 컴포넌트에 name이라는 것을 전달해주고 싶다면 이렇게 작성하면 된다. 🍫 전달받은 props를 컴포넌트에서 사용하기 function Hello(props){ console.log(props) return Hello!; } Hello 컴포넌트에서 props를 사용하고 싶다면 인자로 props를 넣어주면 된다. props를 콘솔로 확인해보면 다음과 같다..

🧸이번에는 리액트 컴포넌트를 만들 때 사용하게 되는 문법인 JSX에 대해서 알아보겠다. 🧸 JSX란? JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하게 되는 문법이다. 얼핏보기에는 HTML처럼 생겼지만, 사실은 자바스크립트이다. 어떻게 자바스크립트가 되냐면, 바벨이라는 도구를 통해서 XML 형태의 코드가 자바스크립트로 변환이 된다. babeljs.io 를 들어가서 확인할 수 있다. 다음과 같이 babel에서는 왼쪽의 코드(JSX)를 저렇게 바꾸어준다는 것이다. 매번 createElement라는 것을 써서 호출하기엔 너무 어려우니까 JSX 문법을 통해 쉽게 작성하고, 바벨이 이를 변환해준다. 🧸 JSX의 규칙 JSX에도 규칙이 있다. 그 규칙에 대해서 알아보겠다. JSX에서 return 뒤에 사용..

🍨 이번 시간에는 첫 리액트 컴포넌트를 만들어보겠습니다. src 폴더에 hello.js라는 파일을 만든다. import React from "react"; 그리고 리액트를 사용하려면 항상 파일 위에 위와 같은 코드를 써주어야 한다. 이는 리액트를 불러와서 사용하겠다는 의미가 된다. 🍨 컴포넌트 만들어보기 컴포넌트를 만드는 방법에는 2가지가 있다. 1) 함수 형태로 컴포넌트 만들기 2) 클래스 형태로 컴포넌트 만들기 클래스 형태로 컴포넌트 만드는 것은 나중에 해보고, 일단은 함수 형태로 컴포넌트를 만들어보겠다. import React from "react"; function Hello(){ return 안녕하세요; } export default Hello; 컴포넌트의 이름은 대문자로 시작하며, 단어가 여러..

리액트를 개발하기 위한 작업환경 준비에 대해 알아보겠습니다. 1. node.js node.js란 브라우저환경이 아닌 곳에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임을 말함 우리가 리액트 프로젝트를 만들면 webpack, babel같은 도구를 사용해야 하는데 그러한 도구들이 node.js 기반으로 만들어졌기 때문에 node.js를 설치해야 함 2. yarn 자바스크립트 package들을 관리(manage)해주는 도구 node.js를 설치하면 npm이 딸려나오는데 npm으로도 할 수 있긴 함 yarn도 npm이랑 비슷한 도구인데 npm보다 빠른 속도로 다운로드받을 수 있게 해준다. npm에 익숙하거나 yarn을 설치하기 싫다면 yarn은 생략해도 되지만 한 번도 사용해보지 않았다면 사용해보..