전체 글16 1. Reactnative 기초 룰 1 대신 를 사용한다. 모든 들은 이미 flexbox인 상태이고, flexDirection은 Column인 상태이다. 룰2 모든 text들은 안에 들어가야한다. 룰3 브라우저에서 사용한던 모든 css스타일을 사용할 수는 없다. 스타일을 사용할때는 const styles = StyleSheet.create ( { container =: { flex : 1, backgroundColor : "red" alignItems : "center" } } ) 이런식으로 사용 은 화면 위쪽의 시계, 배터리, 와이파이 등을 말한다 레이아웃 시스템 레이아웃을 만들때 height width 등에 px값을 주는 것이 아닌 다른 많은 스크린들에서 동일한 방식으로 보여지는 반응형 레이아웃을 만들어야함. ex. city : {.. 2024. 2. 22. 4. React.js effects state가 변화할 때 모든 component 들이 다시 실행되고 모든 code들도 다시 실행된다. 컴포넌트 내부의 코드중 일부는 처음 실행했을 때만 실행되고 state가 변화해도 다시 실행되지 않도록 하고 싶을때 effects를 사용한다. useEffect의 기본 사용법은 useEffect( , [ ])이고, 첫번째 아규먼트에는 실행되지 않게 하고싶은 함수의 이름을 넣고, 두번째 아규먼트 배열에는 특정 state(이 state가 변화할때만 첫번째 아규먼트에 들어간 함수를 실행시킨다.) 의 이름을 넣는다. 사용법 (예시) function App() { const [counter, setCounter] = useState(0); const onClick = () => { setCounter((current.. 2024. 2. 15. 3. React.js props 리액트 js props 리액트에서 부모컴포넌트에서 자식컴포넌트로 데이터를 보내야할때. ex. 버튼 스타일을 한개의 컴포넌트에 저장해놓고 안에있는 텍스트 값만 바꿀때 const root = document.getElementById("root"); function Btn(props) { return ( {props.text} ) } function ConfirmButton() { return ( Confirm ) } const MemorizedBtn = React.memo(Btn); function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue (" Revert Change.. 2024. 2. 14. 2. setState, setState 예제 setState 프로그램 실행중에 데이터가 변화되어서 그것을 다시 렌더링 해야될떄 setState는 컴포넌트의 state 객체에 대한 업데이트를 실행한다.. state가 변경되면, 컴포넌트는 리렌더링된다. const root = document.getElementById("root"); function App() { let [counter, setCounter] = React.useState(0) const onClick = () => { setCounter(counter+1); } return ( Total clicks : {counter} Click me ); } ReactDOM.render(, root) React.useState 는 배열을 넘겨주는데 배열의 첫번째 요소는 우리가 담으려고하는 dat.. 2024. 2. 8. 1. html 태그, 속성, 내용, 이벤트를 리액트에서 만드는법 (jsx) jsx를 사용할때 변수,함수 이름은 대문자로 시작해야함 2024. 2. 8. 이전 1 2 3 4 다음