yevdev◡̈

리액트를 공부하는 초반에 조금 헷갈려했던 useEffect, useState 중 useState를 공부해보고자 한다. 사용자의 인터렉션에 따라 바뀌어야 할 때 어떻게 구현해야 하는지에 대해서..! 💡useState? react Hooks 중 하나! 함수형 컴포넌트에서도 상태를 관리할 수 있게 해주는 Hook 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 따라서 useState를 사용하면 컴포넌트에서 상태를 관리할 수 있다. 1️⃣ 이벤트 설정하기 import React from 'react' function Count() { const onIncrease = () => { // button이 눌렸을 때 동작할 코드 } const onDecrease = () => { // button이 눌렸을 때..

💡조건부 렌더링? 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미 Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때, isSpecial 이라는 props를 설정 import React from 'react'; import Hello from './Hello'; import Wrapper from "./Wrapper"; function App() { return ( ); } export default App; true는 자바스크립트 값이기 때문에 중괄호로 감싸기 EX) Hello 컴포넌트에서는 isSpecial이 true냐 false 이냐에 따라서 컴포넌트 좌측에 * 표시를 보여주겠다 삼항연산자로~ Hello.js import React from 'react'; function Hello(..

💡Props? Properties의 줄임말 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할때, props를 사용 Props의 기본 사용법 1️⃣ 하나의 props 전달 Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name 이라는 값을 전달해주고 싶을 경우 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( // name값을 Hello 컴포넌트에게 보내기 ); } export default App; Hello.js (받아온 컴포넌트 사용하기) import React from 'react'; function Hello(props) { return {props.name} } export d..

💡JSX? 리액트에서 생김새를 정의할 때, 사용하는 문법 HTML처럼 생겼지만 실제로는 JavaScript! return JSX를 알아보자!; 💡 JSX의 기본규칙 1️⃣ 꼭 닫혀야 하는 태그 import React from 'react'; import Hello from './Hello'; function App() { return ( /* 여기에서 오류 발생! 꼭 로 닫아주자 */ ); } export default App; HTML에서는 input과 br 태그를 닫지 않고 사용하기도 한다! 하지만 리액트에서는 그렇게 하면 안됨! Self Closing 태그를 사용하자! /* 잘못됨 */ /* Self Closing 태그 */ 2️⃣ 꼭 감싸져야하는 태그 두개 이상의 태그는 무조건 하나로 감싸져야 한..

1️⃣ 컴포넌트 하나 만들어보기 import react from 'react';// 리액트 불러오기 function Hello() { return 안녕하세요 } export default Hello;// Hello 라는 컴포넌트로 내보내겠다! 리액트 컴포넌트 종류 함수형 : 내가 블로그에 작성하고 공부하면서 쓸 컴포넌트 형태임! 클래스형 export default Hello; 다른 컴포넌트에서 불러와서 사용가능 2️⃣ App.js에서 Hello 컴포넌트 불러오기 import React from 'react'; //리액트 불러오기 import Hello from './Hello'; //Hello 컴포넌트 불러오기 function App() { return ( {/* 적용! */} ); } export de..

💡아이디어의 시작 " 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? " 라는 아이디어에서 시작! 아이디어의 장점 : "업데이트를 어떻게 해야할 지"에 대한 고민을 전혀 안해도 되기 때문에 개발이 쉬움 아이디어의 단점 : 모든 걸 다 날려버리고 새로 만든다? 너무 오래걸려! 하지만, 이 단점은 Virtual DOM 이라는 것을 사용해서 해결! Virtual DOM 말 그대로 메모리에 존재하는 가상의 DOM 그저 Javascript 객체! -> 속도가 빠름! 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링 업데이트를 어떻게 할지에 대한 고..