data life

state 끌어올리기 function A(){ return( ); } 위와 같은 구조의 컴포넌트들이 존재한다고 가정해보자. 만일 C컴포넌트에서 B컴포넌트가 가진 state가 필요하다 할 때의 상황이라면 어떻게 하는 것이 좋은가? B컴포넌트와 C컴포넌트가 가지고 있는 state를 A컴포넌트로 끌어올려 사용하면 편리하지 않을까? 이때, 바로 props를 이용하여 state를 주고받을 수 있다. 섭씨 기준 100도 이상 또는 화씨 기준 212 이상이면 끓는 물, 아니면 끓지 않는 물이라는 메세지를 보여주도록 구현한 화면이다. 이때, 섭씨와 화씨는 서로 다른 state를 갖도록 구현하도록 함. 동일한 기능은 다음과 같다. input에 숫자 입력 특정 기준치에 이상이면 끓는 물, 아니면 끓지 않는 물이라는 메세지..

state 업데이트는 비동기적일 수 있다. export default function App() { const [number, setNumber] = useState(1); const add = () => setNumber(number + 1); const subtract = () => setNumber(number - 1); const multiplyBy2 = () => setNumber(number * 2); const multiplyBy2AndAddBy1 = () => { multiplyBy2(); add(); }; return ( Number : {number} + 1 - 1 *2 *2 + 1 ); } 다음과 같이 버튼을 클릭하면 해당 연산을 하도록 구현하였다. 잘 작동이 되는지 확인해보면 *2 ..

⭐State ⭐ 1️⃣ state를 쓰는 이유 2️⃣ useState() 3️⃣ state 불변성 4️⃣ state 다루기 1️⃣ state를 쓰는 이유 버튼 클릭시 ,+1 이 되도록 구현하는 카운터로 예시를 들어봄 /**App.js**/ function App(){ return ( ) } export default App; /**Counter.js**/ export default function Counter(){ let count = 0; return( (count +=1)}>+1Counter : {count} ); ➡️카운터 클릭 시, 변경되지 않는 것을 확인할 수 있다. 왜냐하면, 카운터는 단지 함수구문이기 때문에! 따라서, 함수 컴포넌트 내에서 상태를 관리해야하는 일이 필요하다. 🤔컴포넌트가 상..

라이브러리 vs 프레임워크 리액트 공식 홈페이지에 들어가면 사용자 인터페이스(UI)를 만들기 위한 자바스크립트의 라이브러리라고 소개되어있다. 프레임워크와 라이브러리에 대한 차이점 및 개념들을 짚고 넘어가기 위해 정리를 해보도록 하자! 프레임워크란? 말그대로 뼈대(framework)다. 단, 기능개발을 위해 일정한 형태와 필요한 기능을 갖추고 있는 뼈대인 것이다. 웹 어플리케이션을 만들기 위해선 다음과 같은 기능들이 필요하다. 대표적인 프레임워크 예시 > Java : Spring Python : Django, Flask 안드로이드 : Android 아이폰 : Cocoa Touch Web Application : Angular, Vue.js 등 루비로 작성된 MVC패턴을 이용하는 Ruby on Rails 그..

1. 시간 변환 함수 생성 function Times() { const [times, setTimes] = useState(""); return ( 분 🔁 시 Reset ); } state를 활용하기 위해 일단 시간 변환 함수를 만들어주었다. 구성은 다음과 같다. 분(minutes) input 교체 버튼 시(hours) input 리셋 버튼 2. 이벤트 함수 생성 및 연결 const onChange = (event) => { setTimes(event.target.value); }; onChange의 이벤트 함수를 생성하여 변경된 값을 저장해주는 setTimes에 입력값을 받아 저장해주도록 하고 value값을 가져오도록 Times함수 input에 연결해준다. 위와 마찬가지로 state를 이용하여 교체버튼..

React란? SPA (Single Page Application) 일반적으로는 최초에 서버로부터 HTML을 받고 페이지의 변경이 필요하다면 다시 서버에 요청하여 HTML을 전달받음 이 과정에서 페이지를 처음부터 다시 불러옴(reload) 반대로 SPA의 경우, 최초 서버로부터 HTML을 받고 페이지의 변경이 필요하다면 변경이 필요한 부분만 JSON으로 전달받음 이 과정에서 페이지에서 변경된 부분만 계산하여 다시 그리게 됨! 이를 위해서, React가 쓰이는데 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 이때, JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공하는 JSX가 있다. 이는 HTML과 유사하여 개발자들에게 유용하다! 또한, UI를 구성..