카테고리 없음
Til (2022.12.16)
다시 안보고 한번 더 Todolist를 만들어 봤다. 다른 부분은 어느정도 된 것 같은데 map,filter를 이해함과 활용을 좀 더 연습 해야 될 것 같다. 추가로 redux에 대해 할 예정
전체 글
카테고리 없음
Til (2022.12.15)
투두리스트 안 보고 처음 부터 만들어 보기 우선 npm create react-app . 으로 환경을 만들었다. 1. components 폴더와 css폴더를 만들었다. 2. app.jsx에 Header, Input, Contents, Contents 순서대로 컴포넌트를 선언했다. 3 Header컴포넌트로 헤더를 만들었다. 4 내용을 담을 배열을 todoContents로 선언하고 const[todo, setTodo] = useState(todoContents); 로 state를 선언했다. 5. Contents컴포넌트 안에 Todo,done제목은 active를 통해 삼항연산자로 작성해주고 TodoList컴포넌트를 선언했다. 6. TodoList컴포넌트에 작성하면 나올 내용의 구조를 만들어주고 props로 받..
카테고리 없음
Til (2022.12.14)
리액트에서 props로 받을땐 title="123" body="456" 이런식으로 가져왔으면 컴포넌트에서 {props.title} {props.body} 이런식으로 내용을 가져와 사용할 수 있다. 상위 컴포넌트에서 배열을 만든 후 그 변수를 props로 가져와 새로운 배열을 만들어준 후 for문이나 map으로 내용을 입력 할 수 있다 예) // 새로운 배열 생성 const lis = []; // map을 이용해 새로운 배열에 기존 배열에 있던 title을 가져와 순서대로 li, a안에 생성 // key에 id도 필수로 가져와야함 props.topics.map(function (item) { lis.push({item.title}); }); // 배열을 태그안에 하나씩 출력 return ( {lis} );
카테고리 없음
Til (2022.12.13)
map : 새로운 배열을 출력 (변형도 가능 * 2등등) filter : 조건에 맞는 배열을 출력 forEach : for같이 활용하능 보다 쉽게 배열에 접근, 반복문 만들기 가능 reduce : 배열을 단일 값으로 변환 map과 filter 처럼 reduce 또한 배열의 각 요소(element)에 대해 콜백(callback)을 실행. 차이점은 reduce는 this callback(accumulator 누적값)의 결과를 한 배열(array) 요소에서 다른 배열(array)의 요소(element)로 전달
카테고리 없음
Til (2022.12.12)
컴포넌트 분리, props, useState Form(onSubmit), button(onChange) input(value)를 활용해서 혼자 투 두 리스트 만들어 보기
카테고리 없음
Wil (2022.12.11)
이번주 동안 처음 리액트를 배워봤는데 아직 컴포넌트 나누는 방법이 낯설어서 어려움이 있지만 점점 이해가 가는 것 같다. 리액트를 해볼수록 리액트는 웹 로딩을 spa로 빠르게, 작업을 편하게 해주는 배경같고 근본적으로 js, 메소드 들을 잘 사용할줄 아는 것도 더욱 중요한 것 같다.
카테고리 없음
Til (2022.12.09)
함수형 프로그래밍 클래스 X 리액트는 사용자가 만들어놓은 jsx코드를 렌더링 하는데, state와 props 의 변화에 따라 동적으로 렌더링을 함! 1. 하위태그에서 props로 컴포넌트를 연결 return div안 여는태그와 닫는태그 안에있는건 하위컴포넌트에서 children으로도 받을수있음(구조분해할당 가능) ㄴ children.props로도 가능 2. 하위 컴포넌트에서 props로 받고 그곳에서 jsx 조작 (props로 받은걸 {???.props}로 받을수도있음) 3. 빈태그를 이용하면 return안에 바로 여러 div설계 가능 4. input안에 value={value} 는 입력값을 뜻함 onchange value를 입력하려면 state에 넣어서 화면을 갱신되게함 onchange로 change가..
카테고리 없음
Til (2022.12.08)
js 메소드 //객체 생성자 function Item(title, price) { //this = {}; this.title = title; this.price = price; this.showPrice = function () { console.log(`가격은 ${price}원 입니다.`); }; //return this; } //new 중요 (위에 함수는 리턴이 없기 때문에 undefind만 나옴 생성자 함수는 new로 붙여야함) const item1 = new Item("인형", 3000); const item2 = Item("가방", 6000); const item3 = new Item("지갑", 7000); console.log(item1, item2, item3); item3.showPrice..