본문 바로가기

전체 글

 (107)
JavaScript Sec 05_3 React에서 배열 사용하기 map 함수를 이용해 리스트를 작성하기 dummylist를 prop으로 전달하여 DiaryList 컴포넌트에서 diaryList라는 이름으로 dummylist 배열을 사용한다. map함수를 이용하여 dummylist 배열의 요소 하나 하나씩 접근한다. 이 요소는 id, author, content, emotion, date를 담고 있는 객체이다. DiaryItem 컴포넌트에 이 객체 요소를 prop으로 전달한다. DiaryItem 컴포넌트에서는 prop으로 전달받은 객체들을 비구조화 할당을 이용해 각각 키를 이름으로 하는 변수로 저장하여 사용한다. 데이터 추가하기 data는 위에서 아래 방향으로 흐르고 event는 역방향으로 흐른다. DiaryEditor와 DiaryList에서 사용할 공통의 데이터를 u..
JavaScript Sec 05_2 React에서 DOM 조작하기 특정 DOM element에 focus 주기 어떤 DOM element에 focus를 줘야하는지 자바스크립트 코드가 알고 있어야 하는데 이렇게 DOM element를 선택할 수 있는 기능을 react는 제공을 하고 있음 그 기능이 useRef 이다 useRef()가 반환하는 값은 React.MutableRefObject인데, 이것은 DOM요소에 접근할 수 있는 기능을 한다. const authorInput = useRef();
JavaScript Sec05_1 React에서 사용자 입력 처리하기 input 태그로 사용자 입력 처리하기 onChange라는 이벤트를 사용하여 input에 어떤 값이 입력되었을 때 그 값을 어떻게 처리할 것인지 작성한다. onChange는 input의 값이 바뀌었을 때 수행하는 이벤트이다. onChange prop에는 콜백함수를 전달한다. 이 때 onChange 이벤트에 등록되는 콜백함수는 이벤트 객체 e를 매개변수로 전달받는다. e.target 은 이벤트 객체의 target을 의미하고 여기서는 input 태그를 의미한다. e.target.value는 입력 필드에 입력된 값을 의미하는데, 상태 변화 함수인 setAuthor의 인자에 e.target.value를 넣으면 state의 값이 이 값으로 업데이트 된다. textarea 태그로 사용자 입력 처리하기 input 태..
JavaScript Sec 04_5 Props Props 컴포넌트에게 데이터를 전달하는 가장 기본적인방법 #1. 만약 Count의 초기값을 0이 아니라, App컴포넌트에서 전달하는 값으로 하고 싶다면? 부모 컴포넌트인 App컴포넌트에서 자식 컴포넌트인 Counter 컴포넌트에게 값을 넘겨주려면 위 코드와 같이 라고 작성하면 된다. ‘initialValue’라는 이름을 붙여 5라는 값을 전달한다. 부모 컴포넌트에서 자식 컴포넌트에게 이름을 붙여 값을 전달하는 방식을 Prop이라고 한다. #2. 값을 여러 개 전달하고 싶으면? 이렇게 값을 여러 개 전달할 수도 있다. Prop이 여러 개이므로 Props라고 한다. #3. 전달받은 값은 어떻게 사용할까? 부모 컴포넌트로부터 받은 값을 자식 컴포넌트가 사용하려면 인자에 ‘props’를 넣으면 된다. 이 pr..
JavaScript Sec04_4 State State 계속해서 변화하는 특정 상태 상태에 따라 각각 다른 동작을 함 리액트에서의 state : 컴포넌트가 갖는 테마처럼, 계속 값이 바뀔 동적인 데이터 예제 Counter 만들기) useState 라는 React의 메소드는 배열을 반환한다. 배열의 비구조화 할당을 통해 0번째 인덱스를 count, 1번째 인덱스를 setCount라는 상수로 받아온다. 0번째 인덱스는 상태의 값으로 사용되고 1번째 인덱스는 0번쨰 인덱스의 상태값을 변화시키는 상태 변화 함수로 사용된다. useState 메소드를 호출하면서 넘겨준 인자인 0은 count라는 상태를 만드는 데 초기값으로 사용된다. 상태 변화 함수인 setCount 인자에 값을 넣으면 그 값으로 count의 값이 바뀐다. cf) html에서는 onClick..
JavaScript Sec04_3 JSX JSX 자바스크립트의 확장 문법이자, 자바스크립트와 html을 혼합해서 쓸 수 있는 문법 리액트에서 주로 사용하는 표현식 리액트의 컴포넌트를 만드는 데 유용하게 사용하는 문법이다. JSX의 규칙 닫힘 규칙 열린 태그가 있으면 반드시 닫힌 태그도 있어야 한다 self closing tag : , 최상위 태그 규칙 최상위 태그는 return문 안에서 즉, 컴포넌트 안에서 가장 바깥에 위치하는 태그를 의미한다. JSX의 표현식은 반드시 하나의 부모 요소를 가져야 한다. JSX로 컴포넌트로 만들어서 return하려면 반드시 하나의 최상위 태그로 다른 모든 태그를 묶어주어야 한다. 만약 최상위 태그를 사용하고 싶지 않다면? 리액트 파일에서 React.Fragment를 불러와 최상위 태그 대신 감싸주면 된다. 로 ..
JavaScript Sec04_2 Create React App Create React App react의 boiler plate (react를 사용할 때 필요한 여러 패키지들을 감싸고 있는 패키지) npm start로 리액트 앱이 실행이 될 때 src 디렉토리 밑에 index.js가 실행이 되면서 public 디렉토리 밑에 index.html에 있는 id가 root인 div 아래로 App.js 파일에 있는 App 함수가 들어간다. node modules node.js 패키지의 구성 요소 중 하나로 외부 모듈을 저장하고 있는 폴더 리액트도 외부 모듈이기 때문에 node modules 아래에 저장되어있다. create-react-app으로 만든 패키지는 굉장히 많은 node module을 갖고 있다. 우리가 이렇게 많은 모듈을 직접 설치할 수 없기 때문에 create-..
JavaScript Sec04_1 Why React.js? 1. 리액트를 사용하는 첫번째 이유 문제점 : Shotgun Surgery problem , 여러 파일에서 같은 코드를 (ex. ~, ~ 등) 반복해서 사용하는 경우, 만약 해당 코드를 수정해야 할 일이 있을 때 파일마다 똑같은 부분을 수정해야 한다. 해결 방법 : 중복 코드를 컴포넌트로 만들어 하나의 파일에 모아둔다. 이렇게 컴포넌트화 방식을 사용하면 공통으로 사용되는 요소의 유지보수가 수월해진다. 하지만 기존에 사용해왔던 방식만으로는 요소들을 컴포넌트로 제작하고 불러다 쓰기가 힘들다. 따라서 React를 사용해야만 한다. ⇒ React는 컴포넌트 기반의 UI 라이브러리이기 때문에 모든 html 요소들을 전부 컴포넌트로 만들어서 재사용 할 수 있다. cf) 하나의 파일에 컴포넌트 하나만 사용해야 하는 ..

티스토리툴바