Yeonn's 기록하며 성장하는 개발일지 :)

액션 (Action) 상태에 어떠한변화가 일어날 때, 우리는 액션을 발생시킨다. 액션은 하나의 객체로 표현됨. { type: "TOGGLE_VALUE" } 액션 객체는 type필드를 필수적으로 가지고 있어야한다. { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } { type: "CHANGE_INPUT", text: "안녕하세요" } 그 외의 필요한 값 또한, 넣어줄 수 있다. 액션 생성함수 (Action Creator) 액션 생성함수는 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체형태로 만들어준다. export function addTodo(data) { return { type: "ADD_TODO", data }; } // 화살표 함수로도..

// Counter.jsx import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출. 이 함수를 호출해주면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다. const [number, se..

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. // App.jsx import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; Hello 컴포넌트에서는 isSpecial 이 true 이냐 false 이냐에 따라서 컴포넌트의 좌측에 * 표시를 보여주는 코드를 작성하기 위해 가장 기본적인 방법이 '삼항연산자'사용이다 ! // Hello.jsx import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { ..

import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 기존의 코드의 경우, 너무 복잡해보이는데 구조분해할당을 써주면 코드가 더 간결해진다. import React from 'react'; function Hello({ color, name }) { return 안녕하세요 {name} } export default Hello; 이렇게 구조분해할당을 사용해주면 일일이 props를 사용하지 않고 간단하게 코드를 줄일 수 있다. defaultProps 로 기본값 설정 컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps ..

리액트는 변경사항이 한가지의 방향으로만 흘러간다. : 데이터(State)가 변경이 되면 → 리액트가 render() 함수를 호출해서 UI가 업데이트 된다. 코드 상으로 보면 클래스 컴포넌트이고, this.state에는 숫자를 담을 수 있는 count가 들어있는 오브젝트가 있다. 그리고 button이 클릭되면 onClick 콜백이 실행될 것이고, 거기에서 우리가 State를 업데이트 시켜 주면 된다 :) State를 바로 수정하는 경우 💩 위와 같이 this.state.count++ 바로 this.state가 가리키고 있는 오브젝트의 count를 증가 시켜 주면 업데이트가 되지않는다. 리액트에서 제대로 상태를 업데이트 하기 위해서는 리액트에서 제공하는 setState 함수를 호출해야 한다 !! 리액트 제대..

오브젝트, 오브젝트 불변성, 함수, 콜백함수 리액트는 자바스크립트 기반의 라이브러리 이기때문에 위의 개념은 확실히 알아야한다. 오브젝트 할당 기본 정리 변수에 문자열, 숫자와 같은 원시형 데이터를 할당하게 되면 데이터 자체가 변수에 할당되지만, 오브젝트를 변수에 할당하면 변수에는 오브젝트가 메모리에 들어있는 주소인, 참조값이 할당. const num = 2; const numObj = { num: 2}; num변수에는 숫자 2 자체가 들어있지만, numObj에는 {num: 2}오브젝트가 메모리에 들어있는 주소인, 참조값이 예를들어 주소가 x1234면 , x1234가 할당 됨. const num = 2; //num에는 숫자2가 들어있고, const numObj = { num: 2}; //numObj에는 x..

**코딩테스트 준비를 위한 알고리즘 자료구조 공부 및 문제풀이** 이번 2주차를 보내면서, 머리가 많이아팟다 😂😂 알고리즘에 대한 개념[ 시간복잡도, 공간복잡도, 정렬, 이진탐색, 어레이와 링크드리스트...등]과 Java script 공부를 병행했다. 알고리즘은 쉬운 것 같은 문제도 너무 오랜시간이 걸렸고, 머리가 너무 아팟다ㅠㅠㅠ 그래도 풀다 보니, 감은 생긴 것 같지만 앞으로 문제풀기 전에 어떻게 풀지 충분히 생각한뒤에 풀어볼계획이다. (처음부터 코드를 치려하는 안좋은 습관이있음..!) + 알고리즘 공부할때는 최대한 생성자함수나 내장함수를 쓰지않고 풀기🔥 Java script도 공부할 부분이 많고, 앞으로 주특기3주 내내 공부를할 계획이며 알고리즘도 많이는 아니더라도 꾸준히 하루에 한 문제씩 풀 것 ..

try{ //소스코드작성 //이안에서 에러 발생 hi } catch(error) { //catch가 에러를 잡아줌 console.log("내가잡은 에러는", error.message) } => hi is not defined 표시 throw = 강제로 에러를 발생 try{ //소스코드작성 //이안에서 에러 발생 if(weight < 30) { throw new Error("에러메세지 작성") } } catch(error) { //catch가 에러를 잡아줌 console.log("내가잡은 에러는", error.message) } 이 경우 조건에 맞지않은 코드를 작성하면 try에서 쓴 에러메세지가 출력 됨 try…catch는 오직 런타임 에러에만 동작한다. 실행가능한 코드에만 try catch가 가능하다. ..