ReactJS3 ReactJS 영화 웹 서비스 만들기 #0(Intro) ReactJS로 영화 웹 서비스 만들기 강의를 2번정도 들은 이후, 블로그를 쓰며 해당 강의의 공부를 조금 정리하고 있다. 해당 강의는, 리액트의 주요 기능과 훅인 useState, useEffect, Prop을 중심으로 목차가 구성되어 있다. 초반에 공부할 때는 기능을 중심으로 강의를 정리했으나, 이런식으로 머릿속에 정리하는 것은 ‘사용 가능성’이 적다고 느꼈다. 결국 나는 강의나 수업을 할 게 아니라, 적재적소에 기능을 사용해야 하는 사람이기 때문에 목적을 생각한다면 만드는 결과물을 기준으로 정리하는 것이 좋을 것이라 생각했다. 만약에 다른 프로젝트를 할 때는 필요한 기능이 있다면(입력을 받아 리스트를 만든다던지, 변환기를 만든다던지..) 여기서 ‘기능’을 중심으로 찾아보면 되기 때문에 찾기도 더 유.. 2025. 1. 12. ReactJS 영화 웹 서비스 만들기 #2(useTab) 1. Intro1) 목적객체의 배열이 있다. 모든 객체는 tab이라는 멤버와, text라는 멤버를 가진다.tab에 해당하는 글씨가 포함된 버튼들을 만들고, 버튼을 누르면 해당 객체 안의 text가 출력되도록 하고 싶다.ex ) section 1을 누르면 → I'm the content of Section 1 이 뜰 수 있도록2) type of the data객체들의 배열로써 객체 안에는 두 개의 요소가 있다.tab : 버튼의 이름text : 버튼 관련 글const content=[ { tab:"Section 1", text:"I'm the content of Section 1" }, { tab:"Section 2", text:"I'm the content of Section 2.. 2025. 1. 12. ReactJS 영화 웹 서비스 만들기 #1(useInput) 1. 목적우리는 사용자가 입력한 값을 검사해야 하는 경우가 있다. 비밀번호의 길이가 몇 글자 이상이어야 하거나, 특정 기호나 숫자를 반드시 포함해야 하는 상황이 여기에 해당된다.이런 필요에 따라 지금부터 사용자의 input을 토대로 ‘검사’를 할 수 있는 Hook을 만들고자 한다.2. Intro우선 Hook없이 사용자의 input을 실시간으로 업데이트 하는 코드를 작성해보자import {useState} from "react" ;function App() { const [value, setValue]=useState=(''); const onChange=(event)=>{ const newInput=event.target.value; setValue(newInput); } return .. 2025. 1. 12. 이전 1 다음
