본문 바로가기

전체 글182

리액트를 다루는 기술 - State, 이벤트 핸들링 State 1. 클래스형 컴포넌트의 state ① state 객체 안에 여러 값이 있을 때 ② state를 constructor에서 꺼내기 ③ this.setState에 객체 대신 함수 인자 전달하기 ④ this.setState가 끝난 후 특정 작업 실행하기 2. 함수형 컴포넌트에서 useState 사용하기 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었지만, 그 이후 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었다. ① 배열 비구조화 할당 배열 비구조화 할당은 객체 비구조화 할당과 비슷하며, 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법이다. ex. const array = [ 1, 2 ]; const [ on.. 2022. 8. 8.
[리액트] 리액트를 다루는 기술 - Props 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 할까? 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다 ! 이 때, 감싸는 부모 요소로 div를 사용하고 싶지 않다면, 리액트 v16 이상부터 도입된 Fragment라는 기능을 사용해도 된다. 이렇게 표현도 가능 JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없다. 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다. 특정 조건을 만족할.. 2022. 8. 8.
[리액트] 단순한 컨버터 구현을 통한 State 연습 cf. useState()으로 비워서 작성했기 때문에, 첫번째 인풋 창에 처음에는 아무 것도 안 적혀 있어야 하는데 minutes이라고 쓰여있는거다. 알고 봤더니, value를 오기해서 일어났던 일 ! input을 value에 연결함으로 그 속성의 속성값 변수({minutes}와 같은)로 우리가 input 외부에서도 업데이트할 수 있게 된다. 리셋 버튼을 하나 만들어 reset이라는 함수를 이벤트 리스너로 걸어줬다. reset 함수에서 정의해줬듯이 이 함수가 실행하면 state의 값은 0으로 바뀐다. 즉, 인풋창에 보여지는 값이 0이 되게 만든 것이다. 단, hours 인풋에 뜨는 0은 minutes/60으로 인한 값이다 ! 현재 위의 코드는 minutes 창에는 change 이벤트를 걸어 상태가 변하면.. 2022. 8. 5.
[알고리즘&자료구조] String 객체& Set 객체 메서드 복습하기 2022. 8. 4.
[React] Inputs and State 오늘 자습을 들어가기 전에 노마드 코더님의 댓글에 반색하며 기운을 내본다! 아자아자 ^_^ 왼쪽 창 리액트에서는 HTML과 비슷한 JSX를 쓰지만 다른 점 몇 가지는 기억해야한다. 그 중 위에서 보다시피 클래스 이름을 지정해줄 때 사용하던 class는 className으로, label의 for라는 속성은 htmlFor라고 사용해야 한다. 오른쪽 창은 왼쪽 리액트를 실행했을 때 개발자 도구를 열어 element 탭을 통해 어떻게 HTML이 작성되어 있나 본 것이다. 왼쪽과 같이 작성했어도 변환되어 HTML은 오른쪽과 같이 작성되어 보여지고 있다 ! JSX 문법을 Babel이 리액트 문법으로, 리액트 문법은 리액트 언팩과 리액트돔 언팩으로 저렇게 HTML로 변환되어 작동한 것이다.(추후 이해 정확도 다시 점.. 2022. 8. 4.
VSCode 전체창에서 빠져나오지 못하고 허우적거리고 있을때 VSCode로 작업을 하다보면 내가 뭘 눌렀는지 가끔 전체창으로 되어 아무 기타 앱이나 아이콘이 닿지 않게 화면이 되버리는 경우가 있다. Esc를 눌러도 화면이 부분 창으로 바뀌지 않고, 구글을 검색해서 다른 ctrl+F4라든지, ctrl+kw, ctrl+w 등을 눌러도 열린 작업창이 닫힐지언정 화면을 가득 채운 VSCode에 미동이 없다. 이럴 때, 위 이미지에서 조금 잘렸지만, VSCode의 왼쪽 하단의 설정 이모티콘을 눌러 중앙 상단의 검색창에 close를 치면 사용되는 단축키가 보일 것이다. 물론 그 위에 ctrl+shift+w도 있는데, 하도 이것 저것을 눌러봐 기억이 확실하진 않지만 그것도 눌러봤던 것 같은데 작동을 안했던 것 같다. 그래서 밑에 주황색 상자의 단축키 alt+F4로 클릭하여 설.. 2022. 8. 3.
[리액트] State state는 기본적으로 데이터가 저장되는 곳 위의 JSX 문법으로 작성한 것을 바벨이 변환하여 head에 다음과 같이 전달해준다. Container 컴포넌트가 리액트 엘리먼트를 리턴하는데, 이 리액트 엘리먼트가 또 다른 두 개의 React Element, h3과 button을 만들고 있다. 리액트는 여러가지 요소들을 리렌더링하려고 해도, 전부 다 새로 생성되지 않고 오로지 바뀐 부분만 생성된다 ! data 변수는 React.useState()를 실행시키는데, 콘솔창에 찍어보면 위와 같은 배열을 볼 수 있다. undefined이 (변경될) data를 나타내는 것이고, f는 이 data를 바꿀 때 사용하는 함수인 것이다 !! React.useState() 함수는 초기값을 설정할 수 있다. 초기값을 설정한다면.. 2022. 8. 3.
기사 API에서 키워드로 기사 필터링하기 페이지 번호는 0번 부터 시작하고 1~10번의 10개의 기사를 가져온다. fq: 필터 쿼리 나는 특정 분야를 지정할 것이 아니므로 그냥 fq=키워드 를 사용하면 되겠다. 박스로 표시해놨듯이 키워드를 찾는 범위는 body와 headline, byline 만이 될 것이다. 10개씩 페이지가 response되므로, 20~29번째 페이지를 받기 위해서는 page 넘버가 2가 되야 하는 것이다. &로 검색 조건을 추가하는 모습을 볼 수 있다 ! 2022. 8. 2.
[리액트] 실습하기 https://reactjs.org/docs/cdn-links.html CDN Links – React A JavaScript library for building user interfaces reactjs.org react를 실행하기 위해 js로 import하기 // react import // react-dom import 스크립트에서 리엑트 엘리먼트 span을 생성했지만, 아직 페이지에는 나타나지 않는다. 이전 바닐라 스크립트 실습에서는 바디에서 작성을 해보았지만, React JS가 HTML을 생성하도록 만들 것인데 그러려면 React-DOM을 사용해야 한다. 이 React-DOM은 모든 리액트 엘리먼트들을 HTML body에 둘 수 있게 해준다. 리액트돔으로 리액트 엘리먼트를 작성해서 렌더링 하려.. 2022. 8. 2.
[리액트] 시작하기 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 내 컴퓨터에 리액트 개발환경을 설치하지 않고 이용해보기 좋은 온라인 서비스, StackBlitz https://stackblitz.com/ StackBlitz | Instant Dev Environments | Click. Code. Done. Instant dev experiences Wait, I can enjoy web dev again? Significantly reduce time to market with matchlessly secure, instantly reprod.. 2022. 7. 29.
[자바스크립트] 강의 복습 DOM과 이벤트 + 구조분해할당 script를 body 밖에서 작성하긴 했지만 script가 body 안에 들어가 있고, body 안에 div가 추가된 것이 콘솔 창에서 보인다. 요소에 스타일을 줄 때, 보통 인라인보다는 클래스 명으로 해서 스타일을 주는 것을 권장한다. 위에 박스들은 클래스 이름으로 묶고, 색깔별로 다시 클래스 이름을 붙여 스타일을 줄 때 복합 클래스 이름을 사용하였다. 구조 분해 할당(Destructing assignment) 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 ex. let users = ['Aiden', 'Tom', 'Harry']; let [user1, user2, user3] = users; // → let user1 = users[0]; let user.. 2022. 7. 25.
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at JS의 DOM으로 div를 추가하려고 head에 script를 작성하고 실행하니 다음의 오류가 발생 그 이유에 대해서는 차후에 자세히 설명을 적기로 하고, head에 넣었던 script를 body 뒤로 넣으면 오류 해결 ! 2022. 7. 23.

티스토리툴바