일반적으로 모바일 애플리케이션은 하나의 화면이 아닌, 다양한 화면이 상황에 맞게 전환되면서 나타남. => 내비게이션(navigation)은 모바일 애플리케이션에서 가장 중요한 기능 중 하나임!! => 리액트 네이티브에서는 내비게이션을 지원하지 않는다. 외부 라이브러리를 이용해야 한다. 🤍리액트 내비게이션 리액트 네이티브 애플리케이션의 내비게이션을 쉽고 간단하게 관리할 수 있도록 도와줌 지원하는 내비게이션 종류 : 스택(stack) 내비게이션, 탭(tab) 내비게이션, 드로어(drawer) 내비게이션 구조 : NavigationContainer, Navigator, Screen 컴포넌트 Screen 컴포넌트 : 화면으로 사용되는 컴포넌트로, name과 component 속성을 지정해야함. name은 화면 ..

✅일반 변수의 선언 방식 let num = 1; num = 2; ✅useState 선언 방식 let [num, setNum] = useState(1); setNum(2); ✅useState 사용 시 주의할 점 상단에 정의할 것 바로 실행하지 말 것 반복문 안에 정의하지 말 것 if문 안에 정의하지 말 것 🤍버튼을 눌렀을 때 1씩 증가하는 기능을 구현하고 싶을 때 아래와 같이 코드를 짜고 실행해 보면 버튼을 눌렀을 때 아무런 변화가 없으나 console.log(num); 을 찍어보면 1씩 증가하고 있는 것을 확인할 수 있다. 이때 useState()를 활용할 수 있다. 실행해 보면 버튼을 누를 때마다 1씩 증가하는 것을 확인할 수 있다. useState를 사용하면 -> setNum이라는 함수를 사용했을 때..

🤍React.js 구조 build : 빌드 시 생성되는 디렉토리 node_modules : 리액트 실행에 필요한 모듈 디렉토리 public : 정적 파일 디렉토리 src : 프로젝트 source 디렉토리 🤍React.js 변수 적용 기존 자바스크립트에서 태그 안에 변수를 적용할 때에는 아래와 같은 코드가 필요했다. 하지만 리액트에서 변수를 적용할 때에는 이렇게 {변수명} 간단한 방법으로 변수를 적용할 수 있다. let name = 'hancoding'; {name} 실제 크롬에서 확인해 봐도 태그 안에 hancoding이 들어간 것을 확인할 수 있다.

이번에도 한코딩님의 유튜브 강의를 들으며 도움받았습니다! 스프링부트와 리액트를 같이 공부하고 싶었는데 좋은 강의 감사합니다,,,🥰 ✅React.js 란? 자바스크립트 라이브러리 SPA(Single Page Application) 한 페이지에서 모든 요소를 불러와서 동작->페이지 이동X 🤍인텔리제이(IntelliJ) 스프링부트 환경에서 리액트 설치하기 1. 프로젝트 생성 2. 의존성은 일단 Spring Web, Lombok, MySQL Driver 3가지만 추가해 준다. 3. 프로젝트 생성 후 ExamApplication을 실행하면 당연히 만들어놓은 페이지가 없기 때문에 아래와 같은 페이지가 뜸. 4. 이제 리액트를 설치해 준다. cd src/main//main 디렉토리로 이동 npx create-reac..

위와 같이 페이지 중에서는 아무나 진입 가능한 페이지, 로그인한 회원만 진이 가능한 페이지, 로그인한 회원은 진입하지 못하는 페이지가 있다. 또는 관리자만 진입 가능한 Admin Page도 있다. 이렇게 인증이 이루어져야만 하는 페이지, 혹은 댓글 작성,파일 전송, 파일 업로드 등 인증이 필요한 작업들이 있는데 이러한 인증은 어떻게 할 수 있을까? => higher-order component function을 사용하면 된다. 🔍Auth (HOC) higher-order component function 은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수이다. 서버에 응답받은 유저의 상태 정보(로그인 여부, 관리자인지 회원인지)에 따라 Auth function에 인자의 값을 다르게 줌으로써 페이지..

🤍회원가입 만들기 회원가입에는 전에 만들어둔 register.js를 활용할 것이다. 이 화면을 회원가입으로 바꿔보도록 한다. 로그인 화면과 거의 유사하다. onChange 이벤트도 로그인과 거의 유사한데, 한 가지 추가된 것은 비밀번호 확인 이벤트이다. 비밀번호와 비밀번호 확인에 입력한 내용이 같아야 하기 때문이다. const onSubmitHandler = (event) => { event.preventDefault(); if (Password !== ConfirmPassword) { return alert('비밀번호와 비밀번호 확인은 같아야 합니다.') } types.js 에 REGISTER_USER 타입을 추가해 주고 export const REGISTER_USER = "register_user";..

현재 Boiler Plate는 로그인과 회원가입 부분을 Formik과 Yupdlfk이라는 라이브러리를 사용하여 좀더 복잡하게 만들었으나 기본강의이기 때문에 기본 기능만 가진 로그인 페이지를 만들어 보도록 한다. 로그인 이메일 비밀번호 확인 1. 로그인 화면 생성 앞서 언급했던 props, state 중에서 로그인 화면 안에서 데이터 변경 시에는 state에 변화를 주어서 data의 변화를 줄 수 있음. 2. React Hook에서 state 만들 때에는 useState를 사용한다. const [Email, setEmail] = useState("") const [Password, setPassword] = useState("") initialState는 처음 값이 어떻게 되는지 설정하는 것이라 "" 빈칸..

🔍리덕스(Redux)란? state 상태 관리 library 리덕스는 자바스크립트 app을 위한 예측 가능한 (predictable) state container 이다. 리액트뿐만 아니라 Angular, jQuery, vanila JavaScript 등 다양한 framework와 작동되게 설계되었다. 즉, 리액트만을 위한 Library는 아니다. 🔍리액트에 리덕스가 필요한 이유? 리액트로 프로젝트 진행 시 Component 는 local state를 가지게 되고, 어플리케이션은 global state를 가지게 된다. ✅local state : 각각의 Component가 가지는 state. ✅global state : 어플리케이션 전체에서 global state는 유지, 즉 local state는 glob..