JiYoung Dev 🖥

LifeCycle 현재 react는 node.js 서버 위에서 돌아가고 있음. node.js는 싱글스레드로 작업을 진행하는 프로세스가 하나 밖에 없음. 그렇기 때문에 위에서 아래로 코드가 작성된 순서대로 진행되는 java와는 달리 코드 중간에 조건문과 같은 무거운 작업이 있으면 위에서 아래로 코드 작성 순서대로 작업을 진행하지 않고, 가벼운 작업부터 진행 후 무거운 작업을 진행시킴. 따라서 React에서는 위에서 아래로 순서대로 코드를 작성한다고 해서 원하는 대로 작업이 실행되지 않음. Reactsms 컴포넌트가 실행되거나, 업데이트 되거나, 삭제될 때 특정 이벤트가 발생함. 이러한 React의 특성을 생명주기(LifeCycle)이라고 하며, React를 통해 우리가 원하는 대로 웹페이지가 작동하게 만들..

useRef 🎈 useRef 예제 작게 버튼을 클릭하면 사각형의 크기가 작게, 원본 버튼을 클릭하면 원본 크기로, 크게 버튼을 클릭하면 사각형의 크기가 크게 변하게 만들기 📖 자바스크립트 자바스크립트에서는 이 문제를 풀기위해 사각형 요소에 접근하기 위해서 document에 접근해야 했음 사각형 요소 : 자바스크립트로 id가 box인 요소에 접근하기 : document.getElementById('box").style.width= 100px 📖 리액트에서 변경시키려면? DOM으로 마찬가지로 접근해야함 useRef 사용 usdRef : 특정 DOM 요소에 접근하고 싶을 때 사용 - 바닐라JS에서는 getElementById, querySelector 등을 사용하여 특정 DOM 요소에 접근하였음 - React..

🎈 FrontController를 사용하는 이유 📖 FrontController 사용하기 전 JoinController, LoginControll를 모두 servlet으로 작성 servlet은 Httpservlet 객체를 받기 때문에 일반 class보다 무거움 → servlet이 많아지면 프로젝트 자체가 무거워짐 따라서 FrontController라는 하나의 컨트롤러(servlet)를 만들고, 그 안에서 각각의 기능에 대한 클래스를 만들어 처리하도록 만듦! 🎈 FrontController 사용하기 📖 사용자 요청 구분 방법 FrontController를 사용하면 mapping값이 하나 > mapping값만 보면 로그인 기능을 하는지, 회원가입 기능을 하는 지등의 어떤 처리를 하는지 구분할 수 없음 사용자..

🎈 구성하기 📖 컴포넌트 1. TodoList 2. TodoItem 3. TodoInput 📖 컨텍스트 - TodoContext 전역적으로 사용할 값 1. todos : 내용, 완료여부 (객체로 저장) 2. newTodo : 내용 🎈 코드 작성하기 (순서) 1) 화면에 첫 Todo 보이게 하기 컴포넌트 연결 컨텍스트 연결 컨텍스트로 사용할 값 state로 저장 후 초깃값 지정하여 출력되도록 2) 입력창에 글씨를 입력하면 newTodo에 저장 handleNewTodo() 3) Add 버튼클릭시 Todos에 newTodo 객체 추가, input 텍스트 창 공백으로 addNewTodo() 4) add 버튼 클릭시 추가된 객체 화면에 띄우기 addNewTodo() 5) delete 클릭하면 해당 리스트 삭제 d..

🎈 context API 쓰는 이유 📖 props의 단점 단방향 데이터의 흐름 위와 같은 데이트 흐름을 단방향 데이터 흐름 (one-way reactive data flow)이라하고 react는 이러한 흐름을 가지고 있음 단방향 데이터 흐름의 장점 1. 관리에 용이함 2. DOM과의 궁합 - tree구조의 dom 구조에 유리함 단방향 데이터 흐름의 단점 자식요소에서 부모요소로 데이터를 바로 전달할 수 없음 ⚙️ 부모요소가 자식요소의 값을 받아볼 수 있도록 하는 방법 귀찮다 >> contextAPI를 사용함 🎈 context API 📖 context API 사용하는 이유 props를 사용하면 여러번 사용해야 함 데이터를 따로 보관하여 끌어다 쓰는 법 >> Context API 장점 : 전역적으로 사용할 수..