분류 전체보기(137)
-
리액트 기초반 3주차(2)
리덕스 전역상태관리를 위한 전역 상태 저장소 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없어요. 왜냐면 데이터는 부모에서 자식으로 흐르게 하기로 했으니까요.(데이터는 단방향으로!) 리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용합니다! 또, 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 정말 뷰만 관리할 수 있잖아요! 코드가 깔끔해질테니, 유지보수에도 아주 좋겠죠. 🙂 상태관리 흐름도 (1) 리덕스 Store를 Component에 연결한다. (2) Component에서 상태 변화가 필요할 때 Action을 부른다. (3) Reducer를 통해서 새로운 상태 값을 만들고, (4) 새 상태값을 Store에 저장한다. (5) Component는 새로운 상태값을 받..
2022.02.02 -
리액트 기초반 3주차(1)
Event Listner 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰여요! 클래스형 컴포넌트 이벤트 리스너는 어디에 위치해야할까요? 클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 지켜볼 수 있겠죠? → 네! componentDidMount()에 넣어주면 됩니다. 이벤트는 꼭 컴포넌트가 사라지면 지워주세요! 이 과정을 clean up 이라고 불러요. 개발자 도구에서 확인했듯, 이벤트는 한번 등록되면 계속 남아있거든요! 그런데 컴포넌트가 사라지면요? 이벤트가 실행되지는 않겠지만, 남아는 있을거예요. 😢 그러니 깨끗하게 정돈해주는 과정이 필요합니다! 그게 c..
2022.02.01 -
리액트 기초반 2주차(2)
Ref 만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 리액트 요소에서 가져와야한다. useRef()라는 리액트 훅을 사용해서 가져올 수 있다. import React from 'react'; import styled from "styled-components"; const BucketList = (props) => { console.log(props) const my_list = props.list_a; const my_wrap = React.useRef(null); // useRef()의 인자는 가장 초기값이다. console.log(my_wrap) // ref를 만들자마자 console을 찍었기때문에 null이 나온다 그 다음에 return이 된다. window.setTimeout(() =..
2022.01.31 -
항해99 Week3 회고
항해 주특기 기초주차는 정말... 지옥같았다. 리액트를 처음 접해봄 + 빡빡한 프로젝트 마무리 시간때문에 스트레스가 엄청난데 거기다 앞서나가는 잘하시는분들이 많이 도와주시기도 했지만 그분들을 보면서 오히려 마음이 조급해지기도 하였다. 지금 숙련주차에 들어와서는 최대한 잘하시는 분들을 보고 조급해하기보다는 내 페이스대로 공부해야겠다라고 생각하고 침착하려고 노력하고있...지만 그래도 여전히 스트레스는 엄청나다ㅠㅠ 그리고 이쯤되니까 체력도 슬슬 떨어지는걸 느낀다ㅠㅠ 컨디션 조절 잘하고 이너피스를 찾아서 내 페이스대로 가야겠다.어찌되든 내 실력 향상이 중요한거니까!!! 이번주 회고 키워드 - DOM DOM을 조금 풀어서 써 볼까요? DOM은 Document Object Model의 약자입니다. Document는..
2022.01.30 -
리액트 기초반 2주차(1)
가상DOM DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 트리 구조 DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면 필요없는 연산이 너무 많이 일어납니다. 그래서 가상돔이 등장! 가상돔은 메모리 상에서 돌아가는 가짜 DOM입니다. 가상돔의 동작 방식: 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워줍니다! → 돔 업데이트 처리가 정말 간결하죠! 진짜 DOM을 새로 그리는 시점 - 처음 페이지 진입했을 때도 그리겠죠! - 데이터가 변했을 때도 그릴 겁니다! 라이프 사이클 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이에요. 컴포넌트는 생성(..
2022.01.29 -
리액트 기초반 1주차(3)
JSX 규칙 1. 태그는 꼭 닫아주기 2. 무조건 1개의 엘리먼트를 반환하기 - 2개여도 안되고 0개여도 안됨(반환값 없으면 null) 3. JSX에서 javascript 값을 가져오려면 {} 중괄호 안에 변수명을 넣어주면 된다. * 리턴안에서는 if문을 쓸 수가 없고 삼항연산자는 쓸 수 있다. 4. class이름을 지정할 때 class대신 className을 쓴다. 5. 인라인으로 style 주기 style도 객체 즉, dictionary로 넘겨줘야한다. // 중괄호를 두 번 쓰는 이유? 딕셔너리{key: value}도 자바스크립트니까요! // 이렇게 쓰거나, orange //혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요! function App() { const styles = { color: ..
2022.01.28